在jQuery中基于Checkbox切换输入上的禁用属性

时间:2012-12-07 04:27:28

标签: javascript jquery forms

我有一个默认情况下未选中的复选框,默认情况下是禁用的输入。

<label class="checkbox span3"><input type="checkbox"> I am a full-time student.</label>
<input class="inputIcon span3" id="disabledInput" type="text" placeholder="Enter School Name" disabled>

我可以完全控制类和id名称,并且该站点使用jQuery,因此可以根据需要使用或简单的javascript。

如果用户选中该框,则应从以下输入中删除“已禁用”属性。如果用户取消选中,则应再次禁用。

在StackOverflow上发现了几个类似的问题,但似乎没有一个确切的用例。

3 个答案:

答案 0 :(得分:15)

您必须将ID分配给复选框以将点击绑定到特定复选框

<强> Live Demo

<input type="checkbox" id="chk">

$("#chk").click(function(){   
    $("#disabledInput").attr('disabled', !this.checked)
});

答案 1 :(得分:2)

首先给你的复选框一个id

<input id='cbFullTime' type="checkbox">

然后在其点击处理程序中,获取文本框,并将其已禁用的属性设置为复选框的checked 属性的当前值的倒数:< / p>

$('#cbFullTime').click(function() { 
    var cbIsChecked = $(this).prop('checked');
    $('#disabledInput').prop('disabled', !cbIsChecked); 
});

请注意,虽然使用attrremoveAttr会起作用(假设您没有使用jQuery 1.6),使用prop函数会更简单一点,而且更多一点正确。有关详细信息,请查看this link

答案 2 :(得分:1)

尝试以下

$(".checkbox").find("checkbox").click(function() { 
$('#disabledInput').prop('disabled', $(this).prop('checked')); 
});