Question

问：如何使用复选框启用/禁用输入？

每个复选框旁边的启用/禁用输入。组数是多种（i = 1,2,3，... n）。默认设置是禁用输入并取消选中复选框。

JsFiddle： http://jsfiddle.net/tDCB9/

HTML：

<input type="checkbox" name="group1" value="">
<input type="text" name="name11" class="stat" value="">
<input type="text" name="name12" class="stat" value="">
<input type="text" name="name13" class="stat" value="">

JS：

$("input[name="group1"][type="checkbox"]").click(function() {
    $("input[name="name11"][type="text"]").attr("disabled", !this.checked);
    $("input[name="name12"][type="text"]").attr("disabled", !this.checked);
    $("input[name="name13"][type="text"]").attr("disabled", !this.checked);
});

Answer 1

您需要为复选框编写一个change（）处理程序，然后使用nextUntil（）找出要禁用的输入字段

$('input[type="checkbox"]').change(function(){
    $(this).nextUntil(':not(input:text)').prop('disabled', !this.checked)
}).change()

演示：Fiddle

Answer 2

你的代码有效，这只是一个简单引用/双引号的问题，

$("input[name='group1'][type='checkbox']")

Demo Corrected

Answer 3

试试这个：

$("input[name='group1'][type='checkbox']").click(function() {
    if($(this).prop('checked')){
        $("input[name='name11'][type='text']").attr("disabled", 'disabled');
    }
    else{
        $("input[name='name11'][type='text']").removeAttr("disabled");
    }
});

Answer 4

这是working fiddle。

$('input[type="checkbox"]').click(function() {
    $(this).siblings('input').attr('disabled', this.checked);
});

您只需要将容器中的输入组分开。

Answer 5

试试这个

$("input[name='group1'][type='checkbox']").click(function() {
    $("input[name='name11'][type='text']").attr("disabled", !this.checked);
    $("input[name='name12'][type='text']").attr("disabled", !this.checked);
    $("input[name='name13'][type='text']").attr("disabled", !this.checked);
});

Answer 6

您可以使用简单的选择器：

 $('input:checkbox').change(function(){
        $(this).nextUntil('br').prop('disabled', !this.checked)
    }).change();

Answer 7

试试这个

$("input[name='group1'][type='checkbox']").click(function() {   
$("input[name='name11'][type='text']").attr("disabled", this.checked);
$("input[name='name12'][type='text']").attr("disabled", this.checked);
$("input[name='name13'][type='text']").attr("disabled", this.checked);
});

JS复选框启用/禁用输入

7 个答案: