Question

我已经有条件地完成了关于启用/禁用按钮的stackoverflow，并且能够找到一些帮助，但不能完全找到我想要的内容。

而不是1个复选框条件，我有2 checkbox个条件。因此，除非已接受这两个复选框，否则不应启用该按钮。

以下是我的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);
}

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

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

尝试以下代码 -

＆＃13;

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

＆＃13;

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

＆＃13;

我测试了它并且它正在工作！希望它有助于你...

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

6 个答案: