Question

我有三个文本字段和相应的复选框。当我选中一个复选框时，相应的文本字段被启用。

我想在我选中一个复选框时隐藏所有其他文本字段，并在重新选中相同的复选框时显示所有文本字段。

我很困惑如何在这里给出id / class并将它们用于给定的问题。

以下是jsfiddle链接： - http://jsfiddle.net/ders/13kkpj1t/

$(document).ready(function () {
//set initial state.
$("#checkbox2").click(function () {
    if ($("#checkbox2").prop('checked') == true) {
        $("#textbox2").attr("disabled", false);
        if ($(".cb1").prop('checked') == false) {
            $(".cb1").attr("disabled", true);
        }
    } else {
        $("#textbox2").attr("disabled", true);
    }
});

注意： - 当我选中一个复选框时，我想隐藏所有其他复选框和文本字段，并在取消选中时再次显示它们。

提前致谢。

Answer 1

检查：

$(document).ready(function () {
  //set initial state.
  $(":checkbox").change(function () {
     $(':text.cb').prop('disabled', this.checked);
     $(this).next(":text").prop("disabled", !this.checked);
  });
});

在复选框上绑定change事件，jQuery有一个:checkbox选择器，用于选择页面中的所有复选框。
:text.cb jQuery还有一个特定的选择器，可以选择:text和:text.cb的所有文字输入，并使用类名cb过滤所有文字输入。
使用.prop(property, boolean)方法禁用所有文本输入。
和this.checked返回一个布尔值，该布尔值位于复选框的上下文中，因此如果选中则返回true else false。
最后，只需定位您的元素，然后使用!this.checked

根据您的最新评论：

如果你可以改变这样的标记：

<div>
    <input type="checkbox" id="checkbox2" class="cb1" />
    <input type="text" id="textbox2" disabled=true class="cb1" />
</div>
<div>
    <input type="checkbox" id="checkbox3" class="cb1" />
    <input type="text" id="textbox3" disabled=true class="cb1" />
</div>
<div>
    <input type="checkbox" id="checkbox4" class="cb1" />
    <input type="text" id="textbox4" disabled=true class="cb1" />
</div>

然后你可以使用这段代码：

$(document).ready(function () {
    //set initial state.
    $(":checkbox").change(function () {
        $(this).parent().siblings().toggle(!this.checked);
    });
});

Updated fiddle

Answer 2

您可以为所有复选框分配一个事件处理程序，然后您要禁用/启用已选中/未选中复选框的下一个同级元素，以便

$(document).ready(function() {
  //set initial state.
  $(".cb1").change(function() {
    $(this).next().prop('disabled', !this.checked)
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox2" class="cb1" />
<input type="text" id="textbox2" disabled=true class="cb1" />
<br />
<input type="checkbox" id="checkbox3" class="cb1" />
<input type="text" id="textbox3" disabled=true class="cb1" />
<br />
<input type="checkbox" id="checkbox4" class="cb1" checked/>
<input type="text" id="textbox4" disabled=true class="cb1" />
<br />

使用复选框jquery选择/取消选择文本字段

2 个答案:

Updated fiddle