Html 如果选中，如何禁用/启用带有复选框的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18110865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable/enable a button with a checkbox if checked
提问by Chidi
Please i need a script that can work with the HTML code bellow to disable/enable the button when a checkbox is checked or unchecked,
请我需要一个可以与下面的 HTML 代码一起使用的脚本，以便在选中或取消选中复选框时禁用/启用按钮，
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
please pals i don't mean the button to be disabled when checked, but rather the other way round.
请朋友们，我不是说选中时禁用按钮，而是相反。
采纳答案by Chidi
brbcoding have been able to help me with the appropriate coding i needed, here is it
brbcoding 已经能够帮助我进行我需要的适当编码，就是这样
HTML
HTML
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Javascript
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;
}
}
回答by Yuriy Galanter
You can use onchangeevent of the checkbox to enable/disable button based on checkedvalue
您可以使用onchange复选框的事件根据checked值启用/禁用按钮
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />
回答by brbcoding
HTML
HTML
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
JS
JS
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function() {
sendbtn.disabled = !!this.checked;
};
回答by da-hype
You will have to use javascript, or the JQuery framework to do that. her is an example using Jquery
您将不得不使用 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
}
});
回答by johnferrie
Here is a clean way to disable and enable submit button:
这是禁用和启用提交按钮的干净方法：
<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);
Here is a fiddle of it in action: http://jsfiddle.net/sYNj7/
这是它的实际操作：http: //jsfiddle.net/sYNj7/
回答by beautifulcoder
I recommend using jQuery as it will do all the heavy lifting for you. The code is fairly trivial.
我建议使用 jQuery，因为它会为您完成所有繁重的工作。代码相当简单。
$('input:checkbox').click(function () {
if ($(this).is(':checked')) {
$('#sendNewSms').click(function () {
return false;
});
} else {
$('#sendNewSms').unbind('click');
}
});
The trick is to override the 'click' event and effectively disable it. You can also follow it up with some CSS magic to make it look "disabled". Here is the code in JavaScript in case you need it. It's not perfect but it gets the point across.
诀窍是覆盖“点击”事件并有效地禁用它。您还可以使用一些 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);
}
});
