javascript - 当复选框选择为否时禁用必填字段

Question

当我将复选框选择为“否”时，我试图禁用所需的选项所以当我选择“否”并提交表单时，我会收到一条必需的消息，它是返回下拉菜单。所以在图片中你可以看得更清楚，你就会明白问题所在

When choice is selected to "NO"

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

When choice is selected to "YES"

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

当我选择 NO 并提交表单时，我会收到所需的消息

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;
                }

            }

我只是在选择“否”时禁用所需的消息，它应该允许我提交表单。有什么建议吗？

标签： javascriptasp.net

Answer 1

在您的提交代码中，您必须验证是否选择了否选项，如下所示：

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