Javascript 如果未选中所有复选框，则禁用按钮

我有一个复选框列表，如果没有选中任何复选框，我需要禁用我的提交按钮，并在至少选中一个复选框后立即启用它。我看到了很多关于只使用一个复选框的建议，但是我很想让它使用多个复选框。我想在这个项目中使用javascript，尽管我知道jquery有很多答案。这是我得到的-它适用于第一个复选框，但不适用于第二个复选框

HTML:

html

选项1

选项2

选项3

js

var checkerr=document.getElementsByClassName（'checkme'）；
var sendbtn=document.getElementById（'sendNewSms'）；
//未选中或选中时，运行该函数
对于（变量i=0；i

html

选项1

选项2

选项3

js

var checkerr=document.getElementsByClassName（'checkme'）；
var sendbtn=document.getElementById（'sendNewSms'）；
//未选中或选中时，运行该函数
对于（变量i=0；i

我想这段代码对你有帮助

window.onload=function（）{
var checkbox=document.getElementsByClassName（'复选框'）
var sendbtn=document.getElementById（'sendNewSms'）；
变量长度=复选框。长度；
对于（var i=0；i我想这段代码会对您有所帮助


window.onload=function（）{
var checkbox=document.getElementsByClassName（'复选框'）
var sendbtn=document.getElementById（'sendNewSms'）；
变量长度=复选框。长度；
对于（var i=0；i我会将您的输入分组到一个容器中，并使用
addEventListener
查看事件。然后循环检查复选框，检查其状态。最后将按钮设置为禁用，除非符合我们的条件


var checks=document.getElementsByName（'checkme'）；
var checkBoxList=document.getElementById（'checkBoxList'）；
var sendbtn=document.getElementById（'sendNewSms'）；
函数allTrue（节点列表）{
对于（变量i=0；i


选项1

选项2

选项3

我会将您的输入分组到一个容器中，并使用
addEventListener
查看事件。然后循环检查复选框，检查其状态。最后将按钮设置为禁用，除非符合我们的条件


var checks=document.getElementsByName（'checkme'）；
var checkBoxList=document.getElementById（'checkBoxList'）；
var sendbtn=document.getElementById（'sendNewSms'）；
函数allTrue（节点列表）{
对于（变量i=0；i


选项1

选项2

选项3

像这样的东西就可以了。我相信你可以用更少的代码来完成，但我还是一个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 " />

选项1

选项2

选项3


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;
}

//保留复选框状态，以减少对DOM的访问
var按钮状态={
checkMe1:false，
checkMe2:false，
checkMe1:错误
};
//获取元素的句柄
var sendbtn=document.getElementById（'sendNewSms'）；
var checkbox=document.querySelectorAll（'.checkme'）；
//添加事件侦听器
对于（变量i=0；i
像这样的东西就可以了。我相信你可以用更少的代码来完成，但我还是一个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 " />

选项1

选项2

选项3


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;
}

//保留复选框状态，以减少对DOM的访问
var按钮状态={
checkMe1:false，
checkMe2:false，
checkMe1:错误
};
//获取元素的句柄
var sendbtn=document.getElementById（'sendNewSms'）；
var checkbox=document.querySelectorAll（'.checkme'）；
//添加事件侦听器
对于（变量i=0；i<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 " />

//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;
}