根据接受2个复选框条件启用/禁用按钮

Enable/disable button based on accepting the 2 checkbox conditions

本文关键字：启用 按钮 条件 复选框 2个      更新时间：2024-05-19

我已经有条件地浏览了关于启用/禁用按钮的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";
   };
}

我已经试过了，但没有效果。我不知道哪里出了问题。

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

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

更新

  1. 使用任何其他名称，然后检查，因为它似乎是保留的，不起作用
  2. 您还需要为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" />

您可以尝试以下代码

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

使用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" />

问题是字符串"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中，只需调用一个函数，该函数将根据条件启用/禁用提交按钮。

试试这个

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

尝试以下代码-

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>

我测试过了，它起作用了！希望它能帮助你…

相关文章：