2009-11-02 75 views
0

當我拿起咖啡 複選框組 - 啓用 按鈕盒組 - 禁用如何在HTML中禁用/啓用?

當我拿起熱可可 複選框組 - 禁用 按鈕盒組 - 啓用

下面的代碼:

<fieldset id="mixdrinks"> 
<!-- pull down or drop menu examples --> 
<label><strong>Drinks Selection</strong></label><br /> 
<select name="drinks" id="drinks"> 
    <option selected="selected" label="none" value="none">null</option> 
    <option value="Coffee">Coffee</option> 
    <option value="Tea">Tea</option> 
    <option value="Juice">Juice</option> 
    <option value="Milk">Milk</option> 
    <option value="Hot Chocolate">Hot Coco</option> 
</select> 
<br /> 

<!-- check box --> 
<label><strong>What do you want in your coffee?</strong></label><br /> 
<input type="checkbox" name="sugar" id="Checkbox1" value="yes" tabindex="4" /> Sugar<br /> 
<input type="checkbox" name="milk" id="Checkbox2" value="yes" tabindex="5" /> Milk<br /> 
<input type="checkbox" name="cream" id="Checkbox3" value="yes" tabindex="6"/> Cream 
<p>...more mix drinks...</p> 

<!-- radio buttons --> 
<label><strong>Do you want Whip Cream on your Hot Coco?:</strong></label><br /> 
<input type="radio" name="WhipCream" id="Radio1" value="yes" title="Yes" />Yes<br /> 
<input type="radio" name="WhipCream" id="Radio2" value="yes" title="No" />No<br /> 
<br /> 
+0

好工作! thx - 非常堅固 – Yves 2009-11-02 20:23:26

回答

2

這樣的事情可能會有所幫助。

<select name="drinks" id="drinks"> 
     <option selected="selected" label="none" value="none">null</option> 
     <option value="Coffee">Coffee</option> 
     <option value="Tea">Tea</option> 
     <option value="Juice">Juice</option> 
     <option value="Milk">Milk</option> 
     <option value="Hot Chocolate">Hot Coco</option> 
    </select> 
    <br /> 

    <!-- check box --> 
    <div id="coffeeDetails"> 
    <label><strong>What do you want in your coffee?</strong></label><br /> 
    <input type="checkbox" name="sugar" id="Checkbox1" value="yes" tabindex="4" /> Sugar<br /> 
    <input type="checkbox" name="milk" id="Checkbox2" value="yes" tabindex="5" /> Milk<br /> 
    <input type="checkbox" name="cream" id="Checkbox3" value="yes" tabindex="6"/> Cream 
    <p>...more mix drinks...</p> 
    </div> 

    <!-- radio buttons --> 
    <div id="cocoDetails"> 
    <label><strong>Do you want Whip Cream on your Hot Coco?:</strong></label><br /> 
    <input type="radio" name="WhipCream" id="Radio1" value="yes" title="Yes" />Yes<br /> 
    <input type="radio" name="WhipCream" id="Radio2" value="yes" title="No" />No<br /> 
    <br /> 
    </div> 

    <script type="text/javascript"> 

     window.onload = function() { 

      var ddl = document.getElementById("drinks"); 

      var coffeeDetails = document.getElementById("coffeeDetails"); 
      var cocoDetails = document.getElementById("cocoDetails"); 

      ddl.onchange = function() { 
       var beverage = ddl.options[ddl.selectedIndex].text; 
       if (beverage == "Coffee") { 
        cocoDetails.style.display = "none"; 
        coffeeDetails.style.display = "block"; 
       } 

       if (beverage == "Hot Coco") { 
        cocoDetails.style.display = "block"; 
        coffeeDetails.style.display = "none"; 
       } 
      } 
     }; 

    </script> 
+0

傑出的工作! :) 10-q – Yves 2009-11-03 01:39:45

5

要做你在問什麼,你需要比html更多的東西,你需要Javascript

我從W3Schools瞭解到javascript。

+0

ok W3Schools它是。 – Yves 2009-11-02 20:30:07

2

使用JavaScript來改變一個給定的HTML屬性CSS顯示屬性:

<script type="text/javascript"> 
<!-- 
    function toggle_visibility(id) { 
     var e = document.getElementById(id); 

     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
    } 
//--> 
</script> 

..then更新要隱藏有類似的東西是什麼:

<span onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</span> 
<div id="foo">This is foo</div> 

參考:Toggle Visibility - Show/Hide Anything

0

您可以使用javascript來啓用或禁用控件:

var varName = document.getElementById('<%= this.buttonGroup.ClientID%>'); varName.disabled = true或false;根據你的要求。

乾杯

相關問題