Question

我知道这不是一个大问题，但我是JS的首发，我无法通过一些foruns找到答案。

问题/我有什么：

•2个复选框（1º复选框称为“First” - 2º复选框称为“Second”）

•2个Div（1ºDiv称为“one”，2ºDiv称为“two”）。

•在这些div中，我有标签和输入标签。

我要搜索的内容：

当我点击First复选框时，它需要禁用Second check并显示div One（隐藏div 2）。当我取消选中第一个时，它需要启用第二个检查并隐藏div。（与第二次检查相同）。

HTML：

<input type="checkbox" id="first" />First Check
<input type="checkbox" id="second" />Second Check

<div id="one">
   <label>1 Div</label>
   <input type="text" maxlenght="12" />
</div>
<div id="two">
   <label>2 Div</label>
   <input type="text" maxlenght="12" />
</div>

CSS ：

#one{
   display: none;
}

#two{
   display: none;
}

Here是小提琴。

Answer 1

演示：https://jsfiddle.net/ymdr5uqd/2/

$('input:checkbox').change(function () {
     $(this).siblings('input:checkbox').attr("disabled",$(this).is(":checked"));
     $('div').show();

     if ($(this).is(":checked")) 
        $('div').hide().eq($(this).index()).show();

});

Answer 2

首先尝试使用此复选框：

$('#first').change(function() {
   if ($(this).is(':checked')) {
       $('#second').attr('disabled', true);
       $('#one').show();
       $('#two').hide();
   } else {
       $('#second').removeAttr('disabled');
       $('#one').hide();
   }
});

复选框更改多个对象的可见性/显示

2 个答案: