31

请我需要一个可以与下面的 HTML 代码一起使用的脚本，以在选中或取消选中复选框时禁用/启用按钮，

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

请朋友们，我并不是说在检查时要禁用该按钮，而是相反。

4

6 回答 6

59

您可以使用onchange复选框的事件来根据checked值启用/禁用按钮

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

<input type="checkbox"  onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />
于 2013-08-07T18:27:43.770 回答
21

HTML

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

JS

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function() {
  sendbtn.disabled = !!this.checked;
};

演示

于 2013-08-07T18:36:58.237 回答
19

您将不得不使用 javascript 或 JQuery 框架来执行此操作。她是一个使用 Jquery 的例子

   $('#toggle').click(function () {
        //check if checkbox is checked
        if ($(this).is(':checked')) {

            $('#sendNewSms').removeAttr('disabled'); //enable input

        } else {
            $('#sendNewSms').attr('disabled', true); //disable input
        }
    });

演示：http: //jsfiddle.net/T6hvz/

于 2013-08-07T18:37:29.357 回答
10

brbcoding 已经能够帮助我进行所需的适当编码，就是这样

HTML

<input type="checkbox" id="checkme"/>
  <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;
}

}
于 2013-08-07T19:19:28.727 回答
3

这是禁用和启用提交按钮的简洁方法：

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

var submit = document.getElementById('sendNewSms'),
    checkbox = document.getElementById('disableBtn'),
    disableSubmit = function(e) {
        submit.disabled = this.checked
    };

checkbox.addEventListener('change', disableSubmit);

这是它的实际操作：http: //jsfiddle.net/sYNj7/

于 2013-08-07T18:45:19.780 回答
2

我建议使用 jQuery，因为它会为您完成所有繁重的工作。代码相当简单。

$('input:checkbox').click(function () {
  if ($(this).is(':checked')) {
    $('#sendNewSms').click(function () {
      return false;
    });
  } else {
    $('#sendNewSms').unbind('click');
  }
});

诀窍是覆盖“点击”事件并有效地禁用它。您还可以使用一些 CSS 魔法来跟进它，使其看起来“已禁用”。这是 JavaScript 中的代码，以备不时之需。它并不完美，但它明白了重点。

var clickEvent = function () {
  return false;
};
document.getElementById('#checkbox').onclick(function () {
  if (document.getElementById('#checkbox').checked) {
    document
      .getElementById('#sendNewSms')
      .onclick(clickEvent);
  } else {
    document
      .getElementById('#sendNewSms')
      .removeEventListener('click', clickEvent, false);
  }
});
于 2013-08-07T18:55:14.293 回答