如果选中,如何禁用/启用带复选框的按钮

Chi*_*idi 22 html javascript

我需要一个可以使用HTML代码的脚本,以便在选中或取消选中复选框时禁用/启用按钮,

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

请好朋友,我不是指在选中时禁用按钮,而是反过来.

Yur*_*ter 44

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

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

<input type="checkbox"  onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />
Run Code Online (Sandbox Code Playgroud)

  • 看起来内联 javascript 是最干净的解决方案的情况之一。很不错! (2认同)
  • 我会将“禁用”属性添加到按钮 (2认同)

brb*_*ing 18

HTML

<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
Run Code Online (Sandbox Code Playgroud)

JS

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

DEMO


da-*_*ype 12

您将不得不使用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
        }
    });
Run Code Online (Sandbox Code Playgroud)

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


Chi*_*idi 6

brbcoding已经能够帮助我完成所需的适当编码,就是这样

HTML

<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Run Code Online (Sandbox Code Playgroud)

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

}
Run Code Online (Sandbox Code Playgroud)