我想有一个表单按钮禁用,直到用户点击复选框。
这是我拥有的代码(表单的最后一部分)
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="checkbox">
Some Text Here
</label>
</div>
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />
我尝试了以下方法
$('#check').click(function(){
if($(this).attr('checked') == false){
$('#btncheck').attr("disabled","disabled");
}
else
$('#btncheck').removeAttr('disabled');
});
但这是行不通的,我不知道为什么。我不知道我如何才能禁用按钮(应禁用视觉也).
解决方案(感谢Rory McCrossan):http://jsfiddle.net/0hvtgveh/
8条答案
按热度按时间xjreopfe1#
你的逻辑有点不对,试试这个:
请注意,禁用时按钮的UI不会更新,但
disabled
属性会更改。您可能希望添加一些CSS样式,以使按钮明显被禁用。另外,我更改了代码,使用
change
事件而不是click
,以更好地满足使用键盘导航的用户的需求。下面是一个完整的工作示例,包括上述修改:
xxhby3vn2#
在更改处理程序上尝试:
e3bfsja23#
您需要更新属性,因此使用
.prop()
而不是.attr()
一本好书.prop() vs .attr()
56lgkhnf4#
当你点击复选框
.is(":checked")
时,如果选中它,返回true,否则返回false。根据您的复选框按钮的选择,它将启用/禁用按钮。Demo
gjmwrych5#
if语句中的条件不正确。请用途:
Demo
vdgimpew6#
使用
if($(this ).prop( "checked" ))
,而不是if($(this).attr('checked') == false)
http://jsfiddle.net/0hvtgveh/4/
z31licg07#
这需要一点逻辑:
记住将你的css Submit Button属性设置为
cursor: not-allowed;
,这样就可以在页面加载时禁用它。PS:这段代码位于页面底部。如果您有一个单独的文件,请不要忘记将其 Package 起来:
$(document).ready(function() { // code goes here });
5t7ly7z58#
我相信另一种处理这个问题的方法是使用document.getElementById: