javascript

Question

我有一个程序，其中 javascript 更改了几个复选框，根据选中的其他复选框将它们设置为禁用、选中或取消选中。我注意到，如果您有一个选中的复选框然后将其禁用，则可以同时选中和禁用它。我不希望这成为可能。我希望任何已禁用的复选框也未选中。我一直在寻找一种简单的方法来做到这一点。我认为 queryselectorall 会起作用。这是一个简化的例子。在此示例中，我默认选中并禁用其中一个框。如果您单击另一个框，它应该摆脱禁用框中的检查。我以为这个简单的函数可以做到这一点，但它不起作用。

 function fixit() {
    document.querySelectorAll('input[type="checkbox"]:checked:disabled').checked=0;
    }

    <form id='theform' name='mainform' method='post' action='#'>
    box1<input onClick='fixit()' type='checkbox' disabled checked> 
    box2<input onClick='fixit()' type='checkbox'>
    box3<input onClick='fixit()' type='checkbox'>
    </form>

Answer 1

您可以使用 HTML DOM removeAttribute() 方法。

function fixit() {
  var i, cb = document.querySelectorAll('input[type="checkbox"]:checked:disabled');
  for (i = 0; i < cb.length; i++) {
    cb[i].removeAttribute("checked");
  }
}

<form id='theform' name='mainform' method='post' action='#'>
  box1
  <input onClick='fixit()' type='checkbox' disabled checked>box2
  <input onClick='fixit()' type='checkbox'>box3
  <input onClick='fixit()' type='checkbox'>
</form>

编辑：我忘记遍历返回的复选框数组。

Answer 2

querySelectorAll returns 一个没有属性 checked 的元素列表。您需要遍历元素列表并应用您的更改。

function fixit() {
  var cbs = document.querySelectorAll('input[type="checkbox"]:checked:disabled');
  for(var i = 0;i<cbs.length;i++){
    cbs[i].checked = 0;
  }
}

<form id='theform' name='mainform' method='post' action='#'>
    box1<input onClick='fixit()' type='checkbox' disabled checked> 
    box2<input onClick='fixit()' type='checkbox'>
    box3<input onClick='fixit()' type='checkbox'>
    </form>

Answer 3

function fixit() {
document.querySelectorAll('input[type="checkbox"]:checked:disabled').forEach(function(x) {
x.checked = 0;
});

}

<form id='theform' name='mainform' method='post' action='#'>
    box1<input onClick='fixit()' type='checkbox' disabled checked> 
    box2<input onClick='fixit()' type='checkbox'>
    box3<input onClick='fixit()' type='checkbox'>
    </form>

Answer 4

首先使用外部 JavaScript，将 <script type='text/javascript' src='external.js'></script> 放入您的 <head>

external.js

var pre = onload, doc, bod, htm, E, fixIt;
onload = function(){
if(pre)pre();

doc = document, bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
fixIt = function(formElement){
  var es = formElement.elements;
  for(var i=0,e,l=es.length; i<l; i++){
    e = es[i];
    if(e.disabled && e.checked){
      e.checked = false;
    }
  }
}
fixIt(E('theform')); // use whenever

}

javascript - 防止复选框同时被选中和禁用

javascript - prevent checkboxes from becoming both checked AND disabled

html

forms

checkbox

selectors-api