複選框正在改變可見性/顯示多個對象

Question

我知道這不是一個大問題，但我是JS的入門者，通過一些foruns找不到我的答案。

的問題/我有什麼：

•2複選框（1º複選框被稱爲 「第一」 - 2º複選框被稱爲 「第二」）

•2的div（1º事業部稱爲 「一個」 和2ºDiv稱爲「two」）。

•在這些div中我有標籤和輸入標籤。

我正在尋找：

當我點擊第一個複選框，它需要禁用第二檢查，並顯示在div一個（隱藏DIV二）。當我取消選中第一個時，它需要啓用第二個檢查並隱藏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(); 
    } 
});