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

Question

我已经浏览了有关有条件地启用/禁用按钮的计算器，并且能够找到一些帮助，但并不完全是我正在寻找的。

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

更新

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