如何禁用/启用带有复选框的按钮(如果选中)
How to disable/enable a button with a checkbox if checked
当复选框被选中或取消选中时,我需要一个可以与下面的HTML代码一起使用的脚本来禁用/启用按钮,
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
朋友们,我并不是说在检查时按钮会被禁用,而是相反。
您可以使用复选框的onchange
事件来基于checked
值启用/禁用按钮
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />
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;
};
DEMO
您必须使用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/
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;
}
}
这里有一个禁用和启用提交按钮的干净方法:
<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/
我建议使用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);
}
});
相关文章:
- 如果函数返回True,则显示Javascript按钮
- 如果未按下该按钮,则在30秒内自动执行该功能
- 如果选择单选按钮,则显示字段
- 如何在jquery中检测浏览器的后退按钮,如果有任何对话框打开,请关闭它
- 如果选择单选按钮,则显示表单
- 如果ng单击附加到提交按钮,则表单未验证
- 如果选择了特定的单选按钮,如何显示窗体
- 如果没有历史记录,我如何隐藏图像或按钮onclick=;历史.go(-1);
- 自动单击按钮(如果没有类)
- 单选按钮(如果单击)
- Knockout JS单选按钮如果所有值都为true,则选择最后一个按钮
- 使用if-else-if-true检查(验证)单选按钮如果未检查则无警报必须检查警报
- jQuery"加载更多的帖子”;隐藏按钮如果最后一个帖子
- Salesforce按钮:如果机会阶段不相等,如何显示错误“;Closed Won”;
- 如何禁用/启用带有复选框的按钮(如果选中)
- yes no单选按钮-如果有两个或多个yes答案,则显示文本
- 使复选框不需要启用按钮(如果隐藏)
- 如何禁用按钮如果我在下拉列表中选择否
- 禁用Asp.net单选按钮列表中的其他单选按钮(如果其中一个已选中)
- 序列化单选按钮|如果未选择单选按钮,则不提交