Question

我们说我有两个输入框，如下所示。而且，我也有一个复选框如下。

<input type="text"  name="vin" id="vin" value="">

<input type="text" name="registration_number" id="registration_number" value="">

<input type="checkbox" id="car-no-rego" name="car-no-rego" >

如果选中该复选框，则我希望输入框被禁用。

$('.car-no-rego:checkbox').change(function () {
    $(#vin).attr('disabled', !this.checked);
    $(#registration_number).attr('disabled', !this.checked);
});

我上面试过了。但我仍然可以输入输入字段..为什么以及如何解决它？

Answer 1

$('#car-no-rego').on('change',  function () {
    $('#vin, #registration_number').prop('disabled', this.checked);
});

FIDDLE＆lt; - 做了工作

Answer 2

你的选择器错了。尝试将id-selector作为字符串传递。

尝试，

$('#car-no-rego').change(function () {
    $('#vin').add($('#registration_number')).prop('disabled', this.checked);
});

DEMO

Answer 3

试试这个

$('#car-no-rego').change(function () {
    $('#vin').attr('disabled', $(this).is(':checked'));
    $('#registration_number').attr('disabled', $(this).is(':checked'));
});

但是如果你有多个复选框并且想要禁用相关的输入框，那么你必须使用与复选框类或id相关的类或id。

参见下面的示例，此处两个输入框的ID结尾，复选框ID

<input type="text"  name="vin" id="vin_car-no-rego1" value="">

<input type="text" name="registration_number_car-no-rego1" id="registration_number" value="">

<input type="checkbox" id="car-no-rego1" name="car-no-rego" >

然后jQuery会像这样

$('input[id^="car-no-rego"]').change(function () {
    var indexValue = $(this).attr('id').replace('car-no-rego','');
    $('#vin'+indexValue+', #registration_number'+indexValue).attr('disabled', $(this).is(':checked'));
});

单击时如何禁用复选框上方的两个输入字段？

3 个答案:

DEMO