单击复选框时从选择标记中启用选项

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上的选项，然后更改禁用属性的选项，而不是整个选择它还有助于属性之间有空格

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