I want to change the second's select box disabled style when the first select box is changed but I can't. Please help me.
<html>
<body>
<select onchange="a()" id="1">
<option>Choose</option>
<option>1</option>
<option>2</option>
</select>
<select id="2" disabled="true">
<option>one</option>
<option>two</option>
</select>
<script>
function a(){
if(document.getElementById('1').value!="Choose"){
document.getElementById('2').style.background="yellow";
document.getElementById('2').style.disabled="false";
}
}
</script>
</body>
</html>
I want to change the second's select box disabled style when the first select box is changed but I can't. Please help me.
<html>
<body>
<select onchange="a()" id="1">
<option>Choose</option>
<option>1</option>
<option>2</option>
</select>
<select id="2" disabled="true">
<option>one</option>
<option>two</option>
</select>
<script>
function a(){
if(document.getElementById('1').value!="Choose"){
document.getElementById('2').style.background="yellow";
document.getElementById('2').style.disabled="false";
}
}
</script>
</body>
</html>
- @Donte'Trumble You shouldn't need a Fiddle for something as simple as this ;) – Niet the Dark Absol Commented Oct 25, 2013 at 12:53
- Yeah, that's why I deleted it. ;) – dowomenfart Commented Oct 25, 2013 at 12:54
3 Answers
Reset to default 3disabled is a property of the element, NOT its style collection.
document.getElementById('2').disabled = false;
It is also important to note that 1 and 2 are NOT valid IDs in HTML older than HTML5, which means older browser may have severe issues with it (such as not recognising it as an ID, not finding it with getElementById, not styling it, etc.) I suggest giving meaningful IDs, even if it's just select1 and select2, that helps reduce the chance of accidentally duplicating IDs.
The "disabled" part is an attribute of the select element, not a CSS property.
Try this instead :
document.getElementById('2').disabled=false;
disabled is an attribute, not style property. That should do:
function a(){
if(document.getElementById('1').value!="Choose"){
document.getElementById('2').style.background = "yellow";
document.getElementById('2').disabled = false;
}
}