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

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

我将您的输入分组到一个容器中，并使用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 2

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 3

我想这段代码可以帮到你

＆＃13;

＆＃13;

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

}
 

＆＃13;

 <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 " />

＆＃13;

＆＃13;

＆＃13;

很少有建议 1.Always id应该是唯一的。 HTML没有显示任何错误，如果你给多个具有相同id的对象，但是当你试图通过document.getelementbyid获取它时，它总是返回第一个，因为getelementbyid返回一个元素

当有这样的要求时，你应该考虑使用类名或搜索元素名称，因为getelementsbyclassname / tag返回一个数组

在标记中，我添加了一个额外的类来使用getelementsbyclassname

进行查询

为了避免添加额外的类，您还可以考虑通过document.querySelectorAll

来完成

检查以下代码段

＆＃13;

＆＃13;

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

}
 

＆＃13;

<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 " />

＆＃13;

＆＃13;

＆＃13;

希望这有帮助

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

＆＃13;

＆＃13;

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
}

＆＃13;

<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 " />

＆＃13;

＆＃13;

＆＃13;