javascript - .checked 和 .disable 在 javascript 中不能一起工作

Question

我有 5 个复选框，如果第一个复选框被选中，那么其他四个复选框也应该被选中。另外，如果我取消选中第一个复选框，这些复选框应该被禁用。当我执行此操作时，所有其他复选框均已启用且未选中，因此我实现了以下代码:

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

问题是其他四个复选框的值没有被选中。如果我取出禁用复选框的代码，那么它就可以工作。

Answer 1

根据定义，禁用的控件不可能是成功的控件。如果控件被禁用，则无法对其进行修改，也不会提交。

如果您希望控件只读但仍提交，则将其设为只读，而不是禁用。