基于接受 2 个复选框条件启用/禁用按钮答案

【问题标题】：Enable/disable button based on accepting the 2 checkbox conditions基于接受 2 个复选框条件启用/禁用按钮
【发布时间】：2015-02-26 06:08:57
【问题描述】：

我有条件地浏览了有关启用/禁用按钮的 stackoverflow，并且能够找到一些帮助，但与我所寻找的不完全一样。

我有 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";
   };
}

我已经尝试过上面的方法，但它不起作用。我不知道我哪里错了。

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案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" />

【讨论】：

没有错误，但它什么也没做。我的意思是它没有启用按钮。
我认为传递变量应该有问题？
@MissMintox 终于得到了问题重命名功能，将checked 改成checkedFunc。已检查似乎已保留...

【解决方案2】：

你可以试试下面的代码

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

【讨论】：

我认为传递变量应该有问题？

【解决方案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" />

【讨论】：

【解决方案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);
}

这更容易阅读/维护，并且可以更好地扩展，以防您以后需要添加更多条件。在所有小部件的onchange 中，只需调用一个函数，该函数将根据条件启用/禁用提交按钮。

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：

【解决方案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>

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

【讨论】：