使用jQuery啓用/禁用複選框

Question

我想僅在複選框被選中時啓用一組複選框。否則，我希望他們保持殘疾。

這裏是我的代碼：

的jQuery：

$(document).ready(function() { 
    $(function() { 
    enable_cb(); 
    $("#university").click(enable_cb); 
    }); 

    function enable_cb() { 
    if (this.checked) { 
     $('input.uni').prop('disabled', false); 
    } else { 
     $('input.uni').prop('disabled', true); 
    } 
    } 
}); 

HTML：

<form action="test.php" method="post" enctype="multipart/form-data" id="test-form" novalidate> 
<input name="table[]" type="checkbox" value="university" id="university"/> 
University<br> 
<input type="checkbox" disabled="true" class="uni" value="1" /> 
A<br> 
<input type="checkbox" disabled="true" class="uni" value="2" /> 
B<br> 
<input type="checkbox" disabled="true" class="uni" value="3" /> 
C<br> 
<input type="checkbox" disabled="true" class="uni" value="3" /> 
D<br> 
<input name="table[]" type="checkbox" value="buildings" /> 
Buildings<br> 
<input name="table[]" type="checkbox" value="offices" /> 
Offices<br> 
<input name="table[]" type="checkbox" value="halls" /> 
Halls<br> 
<input name="table[]" type="checkbox" value="labs" /> 
Labs<br> 
<input name="table[]" type="checkbox" value="studios" /> 
Studios<br> 
<input name="table[]" type="checkbox" value="machines" /> 
Machines<br> 
<input name="table[]" type="checkbox" value="facilities" /> 
Facilities<br> 
</form> 

爲什麼這不是爲我工作嗎？

Answer 1

改爲使用.on()方法並使用'click'觸發器。檢查下面的代碼片段

function enable_cb() { 
 
    if (this.checked) { 
 
    $('input.uni').prop('disabled', false); 
 
    } else { 
 
    $('input.uni').prop('disabled', true); 
 
    } 
 
} 
 

 

 
$(function() { 
 
    enable_cb(); 
 
    $("#university").on('click',enable_cb); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="test.php" method="post" enctype="multipart/form-data" id="test-form" novalidate> 
 
<input name="table[]" type="checkbox" value="university" id="university"/> 
 
University<br> 
 
<input type="checkbox" disabled="true" class="uni" value="1" /> 
 
A<br> 
 
<input type="checkbox" disabled="true" class="uni" value="2" /> 
 
B<br> 
 
<input type="checkbox" disabled="true" class="uni" value="3" /> 
 
C<br> 
 
<input type="checkbox" disabled="true" class="uni" value="3" /> 
 
D<br> 
 
<input name="table[]" type="checkbox" value="buildings" /> 
 
Buildings<br> 
 
<input name="table[]" type="checkbox" value="offices" /> 
 
Offices<br> 
 
<input name="table[]" type="checkbox" value="halls" /> 
 
Halls<br> 
 
<input name="table[]" type="checkbox" value="labs" /> 
 
Labs<br> 
 
<input name="table[]" type="checkbox" value="studios" /> 
 
Studios<br> 
 
<input name="table[]" type="checkbox" value="machines" /> 
 
Machines<br> 
 
<input name="table[]" type="checkbox" value="facilities" /> 
 
Facilities<br> 
 
</form>