單擊複選框時從選擇標記中啓用選項

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