javascript - 单击复选框时启用选择标签中的选项

Question

有一个选择下拉菜单，其中一个选项最初被禁用。我想要的是仅在单击复选框时启用该选项。不知道如何在单个选项上执行此操作，而是启用/禁用整个选择下拉列表:(。

    <input type='checkbox' id='details' name='form_details<?php if ($form_details) echo ' checked'; ?> onchange='enableOption()';>

   <select name='form_summarize_by' id='summarize_by'>
   <?php
    echo " <option value='0'>Orange</option>\n";
    echo " <option value='1'" . (!$form_details ? "disabled='disabled'":"" ) . ">Pear</option>";
    ?>

    <script type="text/javascript">
    function enableOption(){
    if(document.getElementById('details').checked == true)
    {
     document.getElementById('summarize_by').removeAttribute('disabled');
    }
    else
    {
     document.getElementById('summarize_by').setAttribute('disabled', 'disabled');
    }
    }
    </script>

Answer 1

在选项上放置一个 id，然后更改选项上的 disabled 属性而不是整个选择。它还有助于在属性之间留出空格。

<input type='checkbox' id='details' name='form_details' <?php if ($form_details) echo ' checked'; ?> onchange='enableOption()';>

<select name='form_summarize_by' id='summarize_by'>
<?php
    echo " <option value='0'>Orange</option>\n";
    echo " <option id="summarize_by_option" value='1' " . (!$form_details ? "disabled":"" ) . " >Pear</option>";
?>

<script type="text/javascript">
    function enableOption(){
    if(document.getElementById('details').checked == true)
    {
     document.getElementById('summarize_by_option').removeAttribute('disabled');
    }
    else
    {
     document.getElementById('summarize_by_option').setAttribute('disabled', 'disabled');
    }
    }
</script>

Answer 2

如果复选框和选择元素在表单中，您可以在复选框上执行以下操作：

onclick="this.form.form_summarize_by.options[1].disabled = this.checked;"

或使用一个功能：

onclick="updateDisabled(this);"

和功能：

function updateDisabled(cb) {
  cb.form.form_summarize_by.options[1].disabled = cb.checked;
}

Answer 3

谢谢！！我能够像这样解决它：

 function enableOption(){
    if(document.getElementById('details').checked == true)
    {

     document.getElementById('summarize_by').options[1].disabled=false;

    }
    else
    {
     document.getElementById('summarize_by').options[1].disabled=true;
    }
 }