复选框切换时禁用输入字段(JQuery)

时间:2010-06-24 11:44:46

标签: javascript jquery forms

我有一个复选框列表,每个复选框都有一个输入字段。如果选中该复选框,则必须禁用输入字段。 示例:

Checkbox 1 - Input 1
Checkbox 2 - Input 2
Checkbox 3 - Input 3

真实的代码:

<table id="food" width="580px">
    <tr>
        <th colspan="5">Eten</th>
        <tr>
            <td><input type="checkbox" name="checkbox_1_1" value="" /></td>
            <input type="hidden" name="todo_1_1" value="7" />
            <td>Braadworst</td>
            <td>7</td>
            <td><input type="text" name="item_1_1" size="4" value="" /></td>
            <td></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox_1_2" value="" /></td>
            <input type="hidden" name="todo_1_2" value="5" />
            <td>Witte worst</td>
            <td>5</td>
            <td><input type="text" name="item_1_2" size="4" value="" /></td>
            <td></td>
        </tr>
    </tr>
</table>

只能禁用具有相同编号的输入字段...

通过Google我发现:http://techchorus.net/disable-and-enable-input-elements-div-block-using-jquery

这个例子很完美,但有没有办法在不预先定义名字的情况下做到这一点?在我的情况下,不可能知道名称,所以在切换复选框时必须确定它们,不是吗?

有什么建议吗?

2 个答案:

答案 0 :(得分:6)

如果您有 “非常” 简单结构

<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />​

你可以

$(':checkbox').change(function(){
  $(this).next().attr('disabled',!this.checked);
})​;

here is a demo

但后来我知道你没有那种 “非常” 的简单结构,所以请阅读以下内容并从上面获取想法......

  1. traversing
  2. selectors
  3. 如果你能提供html的结构,那就更好了......

答案 1 :(得分:4)

首先对标记进行一些修正:隐藏的输入需要在<td>内,标题行需要关闭</tr>,然后你可以这样做:

​$('#food').delegate(':checkbox', 'change', function(​​​​​​​​​​​​​​​​​) {
    $(this).closest('tr').find('input:text').attr('disabled', !this.checked);
});
$(':checkbox').change(); //set state initially

You can see a demo here,我们使用.closest()来启动<tr>,然后使用.find():text查找[type=text]的输入内容