javascript - 如果使用 jquery 单击特定单选按钮，如何禁用文本框？

Question

我有一个 html 表单，其中有四个单选按钮和一个文本框。我想做的是 - 一旦我单击 Test4 单选按钮，我想禁用 node 文本框，以便没有人可以在其中输入任何内容。我不想隐藏它，我只是想禁用它。

但是，如果任何人单击 Test1 或 Test2 或 Test3，那么任何人都可以在其中输入任何内容。

这是我的 jsfiddle

使用 jquery 可以做到这一点吗？

Answer 1

是的，这是可能的；我建议:

$('input[type="radio"]').change(function(){
    $('#node').prop('disabled', this.value === 'test4');
});

JS Fiddle demo .

这会将#node 元素的disabled 属性设置为true(如果changed-element 的值为“test4”) ，如果没有，则为 false。

进一步讨论评论(其中，基本上，OP显示检查 type="radio" 的其他 input 元素导致 #node 元素重新启用)，我修改了 HTML 以提供一种简单的方法，使用 data-affects< 将适当的 input 与特定的文本输入相关联。给出以下 HTML:

<input type="radio" name="data" id="test1" value="test1" data-affects="nodes" />Test1 
<input type="radio" name="data" id="test2" value="test2" data-affects="nodes" />Test2 
<input type="radio" name="data" id="test3" value="test3" data-affects="nodes" />Test3 
<input type="radio" name="data" id="test4" value="test4" data-affects="nodes" />Test4

加上修改后的 jQuery:

$('input[type="radio"][data-affects]').change(function(){
    $('#' + this.getAttribute('data-affects')).prop('disabled', this.value === 'test4');
});

JS Fiddle demo .

引用文献:

• change() .
• prop() .