Enable/disable 按钮基于接受 2 个复选框条件

Question

我有条件地查看了关于 enable/disable 按钮的计算器，并找到了一些帮助，但并不完全是我想要的。

我有 2 checkbox 个条件，而不是 1 个复选框条件。所以除非两个复选框都被接受，否则不应启用该按钮。

以下是我的html：

<input type="checkbox" id="f_agree" value="1" onchange="checked(this, 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checked('f_agree', this)"/>

<button type="submit" disabled="disabled" id="acceptbtn">Continue</button>

以下是javascript：

function checked(element1, element2) {
    var myLayer = document.getElementById('acceptbtn');

   if (element1.checked == true && element2.checked == true) {
        myLayer.class = "submit";
        myLayer.disabled = "";
   } else {
        myLayer.class = "button:disabled";
        myLayer.disabled = "disabled";
   };
}

我已经按照上面的方法试过了，但是还是不行。我不知道我哪里错了。

Answer 1

它不会工作，因为您没有删除禁用的属性。

function checked(element1, element2) {
    var myLayer = document.getElementById('acceptbtn');

   if (element1.checked == true && element2.checked == true) {
        myLayer.class = "submit";
        myLayer.removeAttribute("disabled");
   } else {
        myLayer.class = "button:disabled";
        myLayer.setAttribute("disabled","disabled");
   };
}

更新

使用任何其他名称，然后进行检查，因为它似乎已被保留且不起作用。
您还需要为 element1 和 element2 执行 getElementById。

function checkedFunc(element1Id, element2Id) {
  
    var myLayer = document.getElementById('acceptbtn');
    var element1 = document.getElementById(element1Id);
    var element2 = document.getElementById(element2Id);
   if (element1.checked == true && element2.checked == true) {
        myLayer.class = "submit";
        myLayer.removeAttribute("disabled");
   } else {
        myLayer.class = "button:disabled";
        myLayer.setAttribute("disabled","disabled");
   };
}

<input type="checkbox" id="f_agree" value="1" onchange="checkedFunc('f_agree', 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checkedFunc('f_agree','f_agree2')"/>

<input type="button" value="check" id="acceptbtn" />

Answer 2

您可以试试下面的代码

if (element1.checked == true && element2.checked == true) {
    myLayer.class = "submit";
    myLayer.removeAttribute("disabled");
} else {
    myLayer.class = "button:disabled";
    myLayer.setAttribute("disabled", "disabled");
};

Answer 3

与jQuery:

var btn;

var changed = function() {
  //get the length of non checked boxes
  var disbl = $('input[id^=f_agree]:not(:checked)').length;
  btn.prop('disabled', disbl);//disable if true, else enable
};


$(function() {
  btn = $('#acceptbtn');
  $('input[id^=f_agree]').on('change', changed).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="f_agree" value="1" />1
<input type="checkbox" id="f_agree2" value="1" />2
<input type="button" id="acceptbtn" value="Submit" />

Answer 4

问题是字符串"f_agree"和id="f_agree"的节点有区别。

您的代码应该可以按预期工作

checked(this, document.getObjectById('f_agree2'))

然而，避免让一个小部件知道另一个小部件会更好......我会通过添加检查所有小部件的外部规则列表来实现：

function okSubmit() {
    return (document.getElementById("f_agree").checked &&
            document.getElementById("f_agree2").checked);
}

这更容易 read/maintain 并且扩展性更好，以防您以后需要添加更多条件。在所有小部件的 onchange 中，只需调用一个函数，该函数将 enable/disable 根据条件提交按钮。

Answer 5

试试这个

 if (element1.checked == true && element2.checked == true) {
    myLayer.class = "submit";
    myLayer.removeAttribute("disabled");
} else {
    myLayer.class = "button:disabled";
    myLayer.setAttribute("disabled", "disabled");
};

Answer 6

试试下面的代码 -

var  chk1 = document.getElementById('chk1');

chk1.addEventListener('click', checked, false);

var  chk2 = document.getElementById('chk2');

chk2.addEventListener('click', checked, false);

function checked(){

if(chk1.checked && chk2.checked) {
  document.getElementById('btn').removeAttribute('disabled');
} else {
  document.getElementById('btn').setAttribute('disabled','disabled');
}

}

 <input type="checkbox" id="chk1" />
 <input type="checkbox" id="chk2"  />
 <button id="btn" disabled >Button<button>

我测试了它，它工作正常！希望对你有帮助...

Enable/disable 按钮基于接受 2 个复选框条件

Enable/disable button based on accepting the 2 checkbox conditions

html

javascript

checkbox

jquery