5 つのチェックボックスがあり、最初のチェックボックスがチェックされている場合は、他の 4 つのチェックボックスもチェックする必要があります。また、最初のチェックボックスをオフにすると、これらのチェックボックスを無効にする必要があります。これを行うと、他のすべてのチェックボックスが有効になり、チェックが解除されるため、次のコードを実装します。
<div class="total_line">
<label for="name">Beheerder </label>
<%= f.check_box:is_admin, {:onchange => "showHideDiv()"} %>
</div>
<div class="total_line">
<label for="onderwerp">Documenten beheren</label>
<%= f.check_box:document_management %>
</div>
<div class="total_line">
<label for="onderwerp">Nieuws beheren</label>
<%= f.check_box:news_management %>
</div>
<div class="total_line">
<label for="onderwerp">Agenda beheren</label>
<%= f.check_box:agenda_management %>
</div>
<div class="total_line">
<% if photo_book == true %>
<label for="onderwerp">Fotoboek beheren </label>
<%= f.check_box:photobok_admin %>
<% end %>
</div>
<div class="total_line">
<label for="onderwerp">Actief</label>
<%= f.check_box:is_actived %>
</div>
そして、以下はjavascriptです
function showHideDiv() {
var mycheck = document.getElementById('membership_is_admin');
if (mycheck.checked) {
document.getElementById('membership_is_admin').setAttribute("readonly", 1)
document.getElementById('membership_photobok_admin').setAttribute("readonly", 1)
document.getElementById('membership_news_management').setAttribute("readonly", 1)
document.getElementById('membership_document_management').setAttribute("readonly", 1)
document.getElementById('membership_agenda_management').setAttribute("readonly", 1)
document.getElementById('membership_document_management').checked = true;
document.getElementById('membership_news_management').checked = true;
document.getElementById('membership_agenda_management').checked = true;
document.getElementById('membership_photobok_admin').checked = true;
jQuery('#membership_document_management').attr('disabled','true');
jQuery('#membership_news_management').attr('disabled','true');
jQuery('#membership_agenda_management').attr('disabled','true');
jQuery('#membership_photobok_admin').attr('disabled','true');
} else {
document.getElementById('membership_is_admin').setAttribute("readonly", 0)
document.getElementById('membership_photobok_admin').setAttribute("readonly", 0)
document.getElementById('membership_news_management').setAttribute("readonly", 0)
document.getElementById('membership_document_management').setAttribute("readonly", 0)
document.getElementById('membership_agenda_management').setAttribute("readonly", 0)
document.getElementById('membership_document_management').checked = false;
document.getElementById('membership_news_management').checked = false;
document.getElementById('membership_agenda_management').checked = false;
document.getElementById('membership_photobok_admin').checked = false;
document.getElementById('membership_document_management').disabled = false;
document.getElementById('membership_news_management').disabled = false;
document.getElementById('membership_agenda_management').disabled = false;
document.getElementById('membership_photobok_admin').disabled = false;
}
}
問題は、他の 4 つのチェックボックスの値がチェックされていないことです。チェックボックスを無効にするコードを取り出すと、機能しています。