JS复选框启用/禁用输入 [英] JS checkbox enable/disable input

问题描述

问::如何通过复选框启用/禁用输入?

每个复选框旁边的启用/禁用输入.组的数量是多种多样的(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);
});

解决方案

您需要为复选框编写一个change()处理函数，然后使用nextUntil()找出要禁用的输入字段

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

演示:小提琴

Q: How to enable/disable input with checkbox?

Each checkbox enable/disable input next to it. Number of groups is various (i = 1,2,3, ...n). Default setting is that inputs are disabled and checkbox unchecked.

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);
});

解决方案

You need to write a change() handler for the checkboxes and then use nextUntil() to find out the input fields to be disabled

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

Demo: Fiddle

这篇关于JS复选框启用/禁用输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！