Question

我有以下代码结构：

<input type="checkbox" name="some_name_1" value="some_val" />
<input type="text" name="input_name_1" value="xxx" />
<input type="text" name="input_name_2" value="yyy" />

<input type="checkbox" name="some_name_2" value="some_val" />
<input type="text" name="input_name_3" value="xxx" />
<input type="text" name="input_name_4" value="yyy" />

我想做什么：

在复选框上，单击“我正在检查”复选框。如果没有，那么我禁用第一个（孩子）和第二（孩子）投入。所以我坚持使用JQuery代码：

$("input:checkbox[name*=some_name_]").click(function(){
     if(typeof $(this + ":checked").val() == "undefined"){
       //disable two child inputs               
     }else{
       //enable two child inputs    
     }
});

所以我在那里注释了应该输入文本的行禁用代码。我尝试了很多变种，但仍然没有运气。

有什么想法吗？

我们将不胜感激。

编辑：

如果我在HTML中添加一些额外的标签会怎么样：

<table>
    <tr>
        <td>
           <input type="checkbox" name="some_name_1" value="some_val" />
        </td>
        <td>       
          <input type="text" name="input_name_1" value="xxx" />
        </td>
        <td>   
          <input type="text" name="input_name_2" value="yyy" />
        </td>
    </tr>
</table>

我应该如何根据这些HTML更改更改JQuery代码？

Answer 1

$("input:checkbox").change(function(){ // when the value changes, not just clicks
    if (this.checked) { // if the checkbox is checked
        $(this)
            .next() // select the next element
                .removeAttr('disabled') // enable it
                .next() // and the next one
                    .removeAttr('disabled'); // enable that one too
    } else { // otherwise
        $(this)
            .next() // select the next element
                .attr('disabled', true) // disable it
                .next() // and the next one
                    .attr('disabled', true); // disable that too
    }
}).change(); // trigger immediately to get the elements disabled if necessary

jsFiddle

参见手册页：

请特别注意问题中此行的问题：

if(typeof $(this + ":checked").val() == "undefined"){

您无法连接元素和字符串。而且，这不是检查元素是否存在的方法。您需要使用length属性：

if ($(this).filter(':checked').length) {

或更好：

if ($(this).is(':checked')) {

或者，甚至更好，根据我的上述代码：

if (this.checked) {

Answer 2

如果您可以更改html，可以尝试这样的事情：

<div class="parentDiv">
<input type="checkbox" name="some_name_1" value="some_val" />
<input class="textBox" type="text" name="input_name_1" value="xxx" />
<input class="textBox" type="text" name="input_name_2" value="yyy" />
</div>

然后对于javascript，我会使用jquery的上下文函数。

$("input:checkbox[name*=some_name_]").click(function(){
     var parent = $(this).parent();
     if(typeof $(this + ":checked").val() == "undefined"){
       //disable two child inputs  
       $(".textBox", parent).attr("disabled", "disabled");
     }else{
       //enable two child inputs    
       $(".textBox", parent).removeAttr("disabled");
     }
});

不是最优雅的东西，但我认为它应该有用。

Answer 3

我能看到实现这一目标的最简单方法是：

$('input:checkbox').click(
    function(){
        if ($(this).is(':checked')){
            $(this).siblings('input:text').attr('disabled',true);
        }
        else {
            $(this).siblings('input:text').removeAttr('disabled');
        }
    }).change();

JS Fiddle demo

已编辑以回应@ Alnitak的评论，如下：

这只能起作用，因为你已经改变了标记

以下jQuery避免了“问题”，并使用了所提供的代码：

$('input:checkbox').click(    
    function() {
        if ($(this).is(':checked')) {
            $(this).nextUntil('input:checkbox').attr('disabled',true);
        }
        else {
            $(this).nextUntil('input:checkbox').removeAttr('disabled');
        }
    }).change();

Revised JS Fiddle demo

Answer 4

这是一个版本，可以在不更改标记的情况下禁用所有输入元素（但不包括）下一个复选框：

$("input:checkbox[name*=some_name_]").click(function() {
    if ($(this).is(':checked')) {
        $(this).nextUntil(':checkbox').filter('input').attr('disabled', true);
    } else {
        $(this).nextUntil(':checkbox').filter('input').removeAttr('disabled');
    }
});

演示http://jsfiddle.net/7hSu7/

在复选框元素后选择2个子元素

4 个答案: