How do I make disabled/enable in HTML?

Question

When I pick Coffee check box group – enabled button box group – disabled

When I pick Hot Coco check box group – disabled button box group – enabled

BELOW CODE:

<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 />

Answer 1

To do what you're asking, you need something more than html, you need Javascript.

I learned javascript from W3Schools.

Answer 2

Use javascript to alter the CSS DISPLAY attribute for a given HTML attribute:

<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 update what you want to hide with something resembling:

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

Reference: Toggle Visibility - Show/Hide Anything

Answer 3

You can use javascript to enable or disable the controls as:

var varName = document.getElementById('<%= this.buttonGroup.ClientID %>'); varName.disabled = true or false; accroding to ur requirements.

Cheers

Answer 4

Something like this might help.

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