javascript - 使用任何选中的复选框启用/禁用所有输入和复选框

Question

我有一个包含许多文本输入字段和复选框的表单。每当选中一个复选框时，所有文本输入字段和所有其他复选框(除了被选中的那个)都应该被禁用。取消选中此复选框后，应再次启用所有禁用的字段。这适用于以下代码(仅显示前 3 行):

<form id="myForm">

    Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll();" />
    <input type="text" id="id1" name="name1" /><br>

    Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll();" />
    <input type="text" id="id2" name="name2" /><br>

    Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll();" />
    <input type="text" id="id3" name="name3" /><br>

</form>


function enableDisableAll() {

    cb1 = document.getElementById('checkboxOne').checked;
    cb2 = document.getElementById('checkboxTwo').checked;
    cb3 = document.getElementById('checkboxThree').checked;


    document.getElementById('checkboxOne').disabled = (cb2 || cb3);
    document.getElementById('id1').disabled = (cb1 || cb2 || cb3);

    document.getElementById('checkboxTwo').disabled = (cb1 || cb3);
    document.getElementById('id2').disabled = (cb1 || cb2 || cb3);

    document.getElementById('checkboxThree').disabled = (cb1 || cb2);
    document.getElementById('id3').disabled = (cb1 || cb2 || cb3);

}

由于代码变得与许多复选框混淆(cb1 || cb2 || cb3 || ...... cb(n))，我想知道是否有更优雅的可能性来做到这一点，例如:

函数 enableDisableAll() {

cb1 = document.getElementById('checkboxOne').checked;
cb2 = document.getElementById('checkboxTwo').checked;
cb3 = document.getElementById('checkboxThree').checked;

var cb_array = [];

cb_array.push("cb1");
cb_array.push("cb2");

var cb_array_imploded = cb_array.join(" || ");

document.getElementById('id1').disabled = (cb_array_imploded);

不幸的是，这不起作用。

有人能为我的问题提供简单的解决方案吗？

Answer 1

选择所有表单元素并循环并检查 id 是否与单击的元素 id 相同。如果是这样，请不要禁用它。

function enableDisableAll(e) {
        var own = e;
        var form = document.getElementById("myForm");
        var elements = form.elements;

    for (var i = 0 ; i < elements.length ; i++) {
          if(own !== elements[i] ){
          
            if(own.checked == true){
              
              elements[i].disabled = true;  
             
            }else{
            
              elements[i].disabled = false;  
            }
          
           }

     }
    
}

function clearAll(){
 document.getElementById("myForm").reset();
}

<form id="myForm">

    Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll(this);" />
    <input type="text" id="id1" name="name1" /><br>

    Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll(this);" />
    <input type="text" id="id2" name="name2" /><br>

    Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll(this);" />
    <input type="text" id="id3" name="name3" /><br>
 
   

</form>

<input class="field button2" type="button" value="Clear form" size="10" onclick="clearAll(this);">

更新:清除所有表单域

document.getElementById("myForm").reset();