啟用/禁用所有輸入和復選框以及任何選中的復選框

Question

我有一個帶有許多文本輸入字段和復選框的表單。 每當選中一個復選框時，應禁用所有文本輸入字段和所有其他復選框（除了已選中的復選框）。 取消選中此復選框后，應再次啟用所有禁用的字段。 這適用於以下代碼（僅顯示前三行）：

<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

一種可能的方法如下： 但是請注意，我修改了HTML，將<input type="checkbox">元素包裝在父<label>元素中，並刪除了不必要的<br />元素以及HTML中引人注目的嵌入式事件處理程序：

 // a named function bound to an element via // via JavaScript; the 'event' argument // is passed automatically from the // EventTarget.addEventListener() method: function disableIfChecked(event) { // the event.target node is the node upon which // the listened-for event was originally triggered: let target = event.target; // 'this' is also passed from the // EventTarget.addEventListener() method; here // retrieved all <input> elements within the // <form> (the 'this'), convert that NodeList // explicitly to an Array and then filter that // Array using an Arrow function: Array.from(this.querySelectorAll('input')).filter( // we retain only those elements ('el') in the Array // which are not equal to, and therefore are not, the // changed element: el => el !== target // iterating over the filtered collection: ).forEach( // each <input> element remaining in the collection // will be disabled if the changed element is clicked, // or enabled if the changed element is no longer clicked: el => el.disabled = target.checked ); } document.querySelector('#myForm').addEventListener('change', disableIfChecked); 

 /* Selecting the <label> element that follows an <input> element: */ input+label::before { /* Adding a line-feed character using the CSS 'content' property of the pseudo-element to force each <label> to a new-line: */ content: '\\A'; display: block; } 

 <form id="myForm"> <!-- the label element associates the text with the enclosed input, so clicking the text focuses that input element: --> <label>Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" /></label> <input type="text" id="id1" name="name1" /> <label>Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" /></label> <input type="text" id="id2" name="name3" /> <label>Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" /></label> <input type="text" id="id3" name="name3" /> </form> 

JS小提琴： 評論 ， 取消注釋

為了支持不支持ES6的瀏覽器，以下是執行相同操作的替代方法：

 // a named function bound to an element via // via JavaScript; the 'event' argument // is passed automatically from the // EventTarget.addEventListener() method: function disableIfChecked(event) { // the event.target node is the node upon which // the listened-for event was originally triggered: let target = event.target; // 'this' is also passed from the // EventTarget.addEventListener() method; here // retrieved all <input> elements within the // <form> (the 'this'), convert that NodeList // explicitly to an Array by treating the NodeList // as an Array, using Function.prototype.call(), // and Array.prototype.slice(): Array.prototype.slice.call( this.querySelectorAll('input') ).filter(function(el) { // we retain only those elements ('el') in the Array // which are not equal to, and therefore are not, the // changed element: return el !== target; // iterating over the filtered collection: }).forEach(function(el) { // each <input> element remaining in the collection // will be disabled if the changed element is clicked, // or enabled if the changed element is no longer clicked: el.disabled = target.checked; }); } document.querySelector('#myForm').addEventListener('change', disableIfChecked); 

 /* Selecting the <label> element that follows an <input> element: */ input+label::before { /* Adding a line-feed character using the CSS 'content' property of the pseudo-element to force each <label> to a new-line: */ content: '\\A'; display: block; } 

 <form id="myForm"> <!-- the label element associates the text with the enclosed input, so clicking the text focuses that input element: --> <label>Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" /></label> <input type="text" id="id1" name="name1" /> <label>Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" /></label> <input type="text" id="id2" name="name3" /> <label>Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" /></label> <input type="text" id="id3" name="name3" /> </form> 

JS小提琴 。

參考文獻：

• Array.from() 。
• Array.prototype.filter() 。
• Array.prototype.forEach() 。
• Document.querySelectorAll() 。
• Element.querySelectorAll() 。
• JavaScript箭頭函數 。

Answer 2

選擇所有表單元素並循環瀏覽並檢查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();

Answer 3

通常最好在諸如復選框，單選按鈕或選擇之類的輸入上使用onchange而不是onclick事件。

為了為所需的盡可能多的輸入提供通用的解決方案，最好使用document.querySelectorAll來獲取表單中的所有輸入。 然后，您可以遍歷所有輸入並將其disabled屬性設置為目標checkbox的checked值。

解決方案摘要如下：

 function enableDisableAll(event) { var allInputs = document.querySelectorAll('#myForm input'); allInputs.forEach(function(input) { if (input !== event.target) { input.disabled = event.target.checked; } }); } 

 <form id="myForm"> Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onchange="enableDisableAll(event);" /> <input type="text" id="id1" name="name1" /><br> Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onchange="enableDisableAll(event);" /> <input type="text" id="id2" name="name2" /><br> Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onchange="enableDisableAll(event);" /> <input type="text" id="id3" name="name3" /><br> </form> 

這里的一個重要細節是，如果要直接將典型的事件處理函數分配給HTML屬性，則該函數必須具有一個明確命名為event的單個參數。 但是，建議在JavaScript中而不是在HTML中分配事件處理程序。 語法為myCheckbox.addEventListener('change', enableDisableAll); 您可能希望通過遍歷所有復選框的選擇器將偵聽器添加到每個復選框。