0

整个下午。

给大家一个小小的周五款待。

我有以下一点 jquery 使输入只读基于和另一个输入的选择：

我真的很喜欢 jsfiddle

这工作得很好，花花公子，以及我希望它如何工作。

但是，在我的情况下，我有大约 13 个 "checkbox1a" 及其关联的 checkbox1b 和 textbox1。

正如您从脚本中看到的那样，我可以复制此代码，但众所周知，复制和粘贴是不好的（尽管在星期五下午提出上诉）所以我想知道如何着手攻击它以便我可以最小化代码但达到同样的结果，

任何指针都非常感谢。

4

4 回答 4

1

您可以为所有这些编写单击事件。

var $tr = $(this).closest('tr');

// access checkbox b inside it

  $tr.find('[id*=checkbox][id$="b"]').attr('disabled', 'disabled');

// access textbox  inside it

  $tr.find('input[type="text"]').attr('disabled', 'disabled');

检查小提琴

您可以编写一个单击事件来以这种方式处理所有复选框单击事件。

更好的方法是为复选框提供类而不是为它们提供 id。

复选框 a - class="checkboxa" 复选框 b - class="checkboxb" 文本框 - class="textbox"

更新了课程的小提琴

这将使您的代码更清晰，更易于处理......

于 2012-10-05T15:16:27.963 回答
1

只需添加一些类并做一些 jQuery 巫术。请参阅jsfiddle。

可以不向禁用/启用的控件添加类，但使用类可以更精细地控制启用/禁用的内容。

于 2012-10-05T15:21:11.537 回答
1

您可以将所有内容合并为一个更改事件 - 假设这些是您在页面上拥有的唯一复选框..或者您可以给它们一个类来选择它们

$('input[type=checkbox]').change(function(){
   var $this = $(this); 
   var $inputs = $this.closest('tr').find('input'); // get relative inputs
   $inputs.not($this).prop('disabled',$inputs[0].checked);  
   // disable fields if first checkbox is checked
});

http://jsfiddle.net/EEuUw/

prop也是设置 disabled 属性（jQuery 1.6+）的正确方法。这是来自 jQuery 文档

应该使用 .prop() 方法来设置禁用和检查，而不是 .attr() 方法。

于 2012-10-05T15:21:14.890 回答
0

我刚刚解决了类似的问题。以下是我的处理方式：

向复选框和文本框添加一个类，然后将 ID 的索引移动到字符串的末尾（使 jquery 更容易），所以它看起来像这样：

这是小提琴链接

<table>
    <tr>
        <td><input  class="checkboxa" type="checkbox" name="input1" id="checkboxa1"/> </td>
        <td><input  class="checkboxb" type="checkbox" id="checkboxb1" /></td>
        <td> <input type="text" id="texbox1" /></td>
    </tr>
    <tr>
        <td><input  class="checkboxa" type="checkbox" name="input2" id="checkboxa2"/> </td>
        <td><input  class="checkboxb" type="checkbox" id="checkboxb2" /></td>
        <td><input type="text" id="texbox2" /></td>
    </tr>
</table>

使用这种方法，JQuery 可以直接定位控件，而不必上下遍历 DOM 试图用“最近”或“查找”找到控件。

$(function() {
    $('.checkboxa').click(function() {
        var index = $(this).attr('id').toString().substring(9);
        $('#checkboxb' + index).attr('disabled', $('#checkboxa' + index)[0].checked);
        $('#texbox' + index).prop('disabled', $('#checkboxa' + index)[0].checked);
    });
});​
于 2012-10-05T17:52:52.463 回答