fiddle

Question

我有两个功能，第一个检查是否已经检查了条款和条件复选框，以及是否检查了每个事件旁边都有一个复选框的事件类别中的至少一个复选框，如果两个函数条件都是已经满足，然后应启用禁用提交按钮，但它似乎无法正常工作。

表单开头的代码

<form id="bookingForm" name"form1" action="#" method="get">

条款和条件的代码

<div id="ChangeTextScript">I have read and agree to the terms and conditions</div> 
<input type="checkbox" id="termsChkbx" onclick= "goFurther(); changetext(this,'ChangeTextScript');">

提交按钮代码

<input type="submit" name="submit" value="Make booking" id="sub1" disabled=disable />

Javascript代码

2个功能

function goFurther(){
if (document.getElementById("termsChkbx").checked == true) {
    return true;
}   else {
return false;
  }}

function checkCheckboxes() {
if (document.querySelector('input[name="event\\[\\]"]:checked') >= 1 ) {
    return true;
}   else {
    return false;
}}

检查两个函数是否都已满足的代码然后应该启用按钮

if(checkCheckboxes() && goFurther()) {
    return true;
     document.getElementById("sub1").disabled = false;
}   else {
document.getElementById("sub1").disabled = true;
    }

Answer 1

我意识到你在两个多月前问过这个问题，但是在你仍在寻找答案的情况下，最好的方法是通过附加到表单的onchange事件处理程序。

<强> HTML

<form id="myform">
    <span>
        <input type="checkbox" id="cb1"> option 1
        <input type="checkbox" id="cb2"> option 2
        <input type="checkbox" id="cb3"> option 3
    </span>
    <div>
        <input type="checkbox" id="tnc"> I agree to the Terms & Conditions.
    </div>
    <button id="disabled" disabled>submit</button>
</form>

<强>的JavaScript

document.getElementById("myform").onchange = function () {
    document.getElementById("disabled").disabled = 
        !(document.getElementById("tnc").checked && 
            (   document.getElementById("cb1").checked ||
                document.getElementById("cb2").checked ||
                document.getElementById("cb3").checked    ) );
}

基本思路是将disabled按钮的#disabled属性设置为否定以下条件：

document.getElementById("tnc").checked && conditionB

其中conditionB等于

document.getElementById("cb1").checked || document.getElementById("cb2").checked || document.getElementById("cb3").checked;

仅在选中true时返回#tnc，以及范围中的一个输入框（#cb1，#cb2或#cb3）。这意味着当满足上述要求时，.disabled属性等于!true（又名false）。

fiddle

Answer 2

如果这是您唯一需要做的事情，您可以封装在while循环中检查函数的代码。另外，我看到在启用按钮之前返回true。这将在返回true时停止执行该函数。您希望在启用按钮后放置此return语句。

javascript禁用表单提交，直到函数为真

2 个答案:

fiddle