.checked and .disable are not working together in javascript

Question

I have 5 checkboxes and if first checkbox is checked then other four checkboxes should also be checked. Also, these checkboxes should be disabled if I uncheck the first checkbox. When I do this, all the other checkboxes are enabled and unchecked so I implement the following code:

<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>

And following is the 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;
    }
}

The problem is value of the other four checkboxes are not becoming checked. If I take out the code of the disable the checkboxes then it is working.

Answer 1

A disabled control, by definition, cannot be a successful control. If a control is disabled then it can't be modified and it won't be submitted.

If you want a control to be readonly but still submitted, then make it readonly, not disabled.