當復選框被選中為“否”時，禁用必填字段

Question

我在選擇“否”復選框時試圖禁用必需的選項，因此當我選擇“否”並提交表單時，我收到必填消息，並且它是返回下拉菜單。 因此，在圖片中您可以看到更好的圖像，並且您將理解問題

當選擇“否”時

https://i.imgur.com/kCFxTFA.jpg

選擇“是”時

https://i.imgur.com/cUPlZeb.jpg

當我選擇“否”並提交表格時，我會收到必填消息

https://i.imgur.com/LvIxMM1.jpg

源代碼

顯示/隱藏內容

$(document).ready(function () {
    $("input[name$='Chapel']").click(function () {
        var test = $(this).val();
        if (test == 'No') {
            $("div#hideChapel").hide();
        }
        else {
            $("div#hideChapel").show();
        }
    });
});

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

時間和日期驗證功能

function dateValidation() {
                    if (document.getElementById('dateOfEvent').value == "")
                        document.getElementById("valDate").innerHTML = "<p>Date Field required.</p>";
                    else
                        document.getElementById("valDate").innerHTML = "";
                     }

                function timeValidation() {
                    if (document.getElementById('TimeFrom').value == "")
                    {
                        document.getElementById("valTime").innerHTML = "<p>Time From Field required.</p>";
                    }
                    else
                    {
                        provjera();
                        document.getElementById("valTime").innerHTML = "";
                    }
                }

教堂時間驗證

 var isValidTIme = 1;

                function chapelTime() {

                    var t = new Date();
                    var timeFrom = document.getElementById("TimeFrom").value;
                    var timeTo = document.getElementById("TimeTo").value;
                    var chapelTimeFrom = document.getElementById("ChapelTimeFrom").value;
                    var chapelTimeTo = document.getElementById("ChapelTimeTo").value;
                    d = t.getDate();
                    m = t.getMonth() + 1;
                    y = t.getFullYear();

                    //Convert time into date object
                    var d1 = new Date(m + "/" + d + "/" + y + " " + timeFrom);
                    var d2 = new Date(m + "/" + d + "/" + y + " " + timeTo);

                    var chd1 = new Date(m + "/" + d + "/" + y + " " + chapelTimeFrom);
                    var chd2 = new Date(m + "/" + d + "/" + y + " " + chapelTimeTo);

                    //Get timestamp
                    var t1 = d1.getTime();
                    var t2 = d2.getTime();

                    var cht1 = chd1.getTime();
                    var cht2 = chd2.getTime();

                    if (t2 < t1) {
                        var endDay = new Date(m + "/" + d + "/" + y + " " + "11:45 PM");
                        var startAnotherDay = new Date(m + "/" + d + "/" + y + " " + "12:00 AM");
                        if (cht1 > t2 && cht1 < t1) {
                            document.getElementById("valChapelTimeFrom").innerHTML = "<p>Chapel Time From must be between Event Time From and Event Time To values.</p>";
                            return false;
                        }
                        else if (cht1 < t1) {
                            document.getElementById("valChapelTimeFrom").innerHTML = "";
                            if (cht2 < cht1 || cht2 > t2) {
                                document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be between Chapel Time From and Event Time To values.</p>";
                                return false;
                            }
                            else {
                                document.getElementById("valChapelTimeTo").innerHTML = "";
                                return true;
                            }
                        }
                        else if (cht2 < t1 && cht2 > t2) {
                            document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be between Chapel Time From and Event Time To values.</p>";
                            return false;
                        }
                        else {
                            document.getElementById("valChapelTimeFrom").innerHTML = "";
                            document.getElementById("valChapelTimeTo").innerHTML = "";
                            return true;
                        }
                    }
                    else {
                        if (cht1 < t1 || cht1 > t2) {
                            document.getElementById("valChapelTimeFrom").innerHTML = "<p>Chapel Time From must be between Event Time From and Event Time To values.</p>";
                            return false;
                        }
                        else if (cht2 < t1 || cht2 > t2) {
                            document.getElementById("valChapelTimeFrom").innerHTML = "";
                            document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be between Event Time From and Event Time To values.</p>";
                            return false;
                        }
                        else if (cht1 >= cht2) {
                            document.getElementById("valChapelTimeFrom").innerHTML = "";
                            document.getElementById("valChapelTimeTo").innerHTML = "";
                            document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be greater then Chapel Time From.</p>";
                            return false;
                        }
                        else {
                            document.getElementById("valChapelTimeFrom").innerHTML = "";
                            document.getElementById("valChapelTimeTo").innerHTML = "";
                            return true;
                        }
                    }
                }

還有其他功能可以檢查時間和日期

        function provjera() {
            if (chapelTime() == false || cocktailTime() == false || mainTime() == false) {
                isValidTIme = 0;
            }
            else {
                isValidTIme = 1;
                }
            }

            function checkIfEmpty() {
                if (document.getElementById("TimeFrom").value == "" || document.getElementById("TimeTo").value == "" || document.getElementById("ChapelTimeFrom").value == "" || document.getElementById("ChapelTimeTo").value == "" || document.getElementById("CocktailTimeFrom").value == "" || document.getElementById("CocktailTimeTo").value == "" || document.getElementById("MainTimeFrom").value == "" || document.getElementById("MainTimeTo").value == "") {
                    return false;
                }
                else {
                    provjera();

                    return true;
                }
            }

            function provjeraBezChapela() {
                if (cocktailTimeWithoutChapel() == false || mainTime() == false) {
                    isValidTIme = 0;
                }
                else {
                    isValidTIme = 1;
                }
            }

            function checkIfEmptyWithoutChapel() {
                if (document.getElementById("TimeFrom").value == "" || document.getElementById("TimeTo").value == "" || document.getElementById("CocktailTimeFrom").value == "" || document.getElementById("CocktailTimeTo").value == "" || document.getElementById("MainTimeFrom").value == "" || document.getElementById("MainTimeTo").value == "") {
                    return false;
                }
                else {
                    provjeraBezChapela();
                    return true;
                }

            }

我只是在選擇“否”時才禁用必需的消息，它應該允許我提交表單。 有什么建議嗎？

Answer 1

在提交代碼中，您必須驗證是否選擇了“否”選項，例如：

if(document.getElementById('YesOption').checked) {
       .........do something.......
}
if(document.getElementById('NoOption').checked) {
           ..... do other things without message....
    }