如果所有複選框都未選中，則禁用按鈕

Question

我有一個複選框列表，如果沒有選中它們，我需要禁用我的提交按鈕，並在至少一次檢查後立即啓用它。我只看到一個複選框就看到很多建議，但是我很想讓它與多個複選框一起工作。我想爲這個項目使用javascript，儘管我知道jquery有一堆答案。這是我得到的 - 它適用於第一個複選框，但不適用於第二個複選框。

HTML：

<input type="checkbox" id="checkme"/> Option1<br> 
<input type="checkbox" id="checkme"/> Option2<br> 
<input type="checkbox" id="checkme"/> Option3<br> 
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " /> 

的Javascript：

var checker = document.getElementById('checkme'); 
var sendbtn = document.getElementById('sendNewSms'); 
// when unchecked or checked, run the function 
checker.onchange = function(){ 
if(this.checked){ 
    sendbtn.disabled = false; 
} else { 
    sendbtn.disabled = true; 
} 

} 

Answer 1

HTML

<input type="checkbox" class="checkme"/> Option1<br> 
<input type="checkbox" class="checkme"/> Option2<br> 
<input type="checkbox" class="checkme"/> Option3<br> 
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " /> 

JS

var checkerArr = document.getElementsByClassName('checkme'); 
var sendbtn = document.getElementById('sendNewSms'); 
// when unchecked or checked, run the function 
for (var i = 0; i < checkerArr.length; i++) { 
    checkerArr[i].onchange = function() { 
    if(this.checked){ 
     sendbtn.disabled = false; 
    } else { 
     sendbtn.disabled = true; 
    } 
    } 
} 

Answer 2

我想這個代碼將有助於你

window.onload=function(){ 
 
var checkboxes = document.getElementsByClassName('checkbox') 
 
var sendbtn = document.getElementById('sendNewSms'); 
 
    var length=checkboxes.length; 
 
    for(var i=0;i<length;i++){ 
 
    var box=checkboxes[i]; 
 
    var isChecked=box.checked; 
 
    box.onchange=function(){ 
 
    sendbtn.disabled=isChecked?true:false; 
 
    } 
 
    } 
 
// when unchecked or checked, run the function 
 

 
} 
 

<input type="checkbox" id="check1" class="checkbox"/> Option1<br> 
 
<input type="checkbox" id="check2" class="checkbox"/> Option2<br> 
 
<input type="checkbox" id="check3" class="checkbox"/> Option3<br> 
 
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

幾點建議 1.Always ID應該是唯一的。 HTML不會顯示任何錯誤，如果您給多個對象使用相同的ID，但是當您嘗試通過document.getelementbyid獲取它時，它總是返回第一個對象，因爲getelementbyid返回單個元素

當存在此類需求時，你應該考慮有一個類名或通過該元素的名稱搜索，因爲getElementsByClassName方法/標籤的標記返回數組

在這裏，我增加了一個額外的類使用getElementsByClassName方法

爲了避免增加額外的類來查詢，也可以考慮通過document.querySelectorAll

檢查下面的代碼片段

window.onload=function(){ 
 
var checkboxes = document.querySelectorAll('input[type=checkbox]') 
 
var sendbtn = document.getElementById('sendNewSms'); 
 
    var length=checkboxes.length; 
 
    for(var i=0;i<length;i++){ 
 
    var box=checkboxes[i]; 
 
    var isChecked=box.checked; 
 
    box.onchange=function(){ 
 
    sendbtn.disabled=isChecked?true:false; 
 
    } 
 
    } 
 
// when unchecked or checked, run the function 
 

 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="check1" /> Option1<br> 
 
<input type="checkbox" id="check2" /> Option2<br> 
 
<input type="checkbox" id="check3" /> Option3<br> 
 
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

希望這有助於

Answer 3

我最好的組投入到容器中進行觀看，對於使用addEventListener事件。然後循環選中複選框，檢查其狀態。最後將按鈕設置爲禁用，除非符合我們的標準。

var checks = document.getElementsByName('checkme'); 
 
var checkBoxList = document.getElementById('checkBoxList'); 
 
var sendbtn = document.getElementById('sendNewSms'); 
 

 
function allTrue(nodeList) { 
 
    for (var i = 0; i < nodeList.length; i++) { 
 
    if (nodeList[i].checked === false) return false; 
 
    } 
 
    return true; 
 
} 
 

 
checkBoxList.addEventListener('click', function(event) { 
 
    sendbtn.disabled = true; 
 
    if (allTrue(checks)) sendbtn.disabled = false; 
 
});

<div id="checkBoxList"> 
 
    <input type="checkbox" name="checkme"/> Option1<br> 
 
    <input type="checkbox" name="checkme"/> Option2<br> 
 
    <input type="checkbox" name="checkme"/> Option3<br> 
 
</div> 
 
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

Answer 4

像這樣的事情會怎麼做。我相信你可以用更少的代碼來完成，但我仍然是一個JavaScript初學者。:)

HTML

<input type="checkbox" class="checkme" data-id="checkMe1"/> Option1<br> 
<input type="checkbox" class="checkme" data-id="checkMe2"/> Option2<br> 
<input type="checkbox" class="checkme" data-id="checkMe3"/> Option3<br> 

<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " /> 

的JavaScript

//keep the checkbox states, to reduce access to the DOM 
var buttonStatus = { 
    checkMe1: false, 
    checkMe2: false, 
    checkMe1: false 
}; 

//get the handles to the elements 
var sendbtn = document.getElementById('sendNewSms'); 
var checkBoxes = document.querySelectorAll('.checkme'); 

//add event listeners 
for(var i = 0; i < checkBoxes.length; i++) { 
    checkBoxes[i].addEventListener('change', function() { 
     buttonStatus[this.getAttribute('data-id')] = this.checked; 
     updateSendButton(); 
    }); 
} 

//check if the button needs to be enabled or disabled, 
//depending on the state of other checkboxes 
function updateSendButton() { 
    //check through all the keys in the buttonStatus object 
    for (var key in buttonStatus) { 
     if (buttonStatus.hasOwnProperty(key)) { 
      if (buttonStatus[key] === true) { 
       //if at least one of the checkboxes are checked 
       //enable the sendbtn 
       sendbtn.disabled = false; 
       return; 
      } 
     } 
    } 
    //disable the sendbtn otherwise 
    sendbtn.disabled = true; 
} 

Answer 5

var check_opt = document.getElementsByClassName('checkit'); 
 
console.log(check_opt); 
 
var btn = document.getElementById('sendNewSms'); 
 

 
function detect() { 
 
    btn.disabled = true; 
 
    for (var index = 0; index < check_opt.length; ++index) { 
 
    console.log(index); 
 
    if (check_opt[index].checked == true) { 
 
     console.log(btn); 
 
     btn.disabled = false; 
 
    } 
 
    } 
 
} 
 
window.onload = function() { 
 
    for (var i = 0; i < check_opt.length; i++) { 
 
    check_opt[i].addEventListener('click', detect) 
 
    } 
 
    // when unchecked or checked, run the function 
 
}

<input type="checkbox" id="check1" class="checkit" />Option1 
 
<br> 
 
<input type="checkbox" id="check2" class="checkit" />Option2 
 
<br> 
 
<input type="checkbox" id="check3" class="checkit" />Option3 
 
<br> 
 
<input type="submit" name="sendNewSms" class="inputButton" disabled="true" id="sendNewSms" value=" Send " />