How do I make disabled/enable in HTML? - xhtml

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

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>

Answer 3

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 4

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