I have the following in my source code, I want to be able to gray out company and dock , disable if someone chooses shipping or storage
<select name="myselect" id="myselect">
<option value="shipping">Shipping</option>
<option value="Recieving" selected="selected">Reciving</option>
<option value="Storage">Storage</option>
</select>
company:<input name="company" type="text" id="company" /></div>
dock:<input name="dockingStation" type="text" id="dock" />
EDIT
I have tried this but now it removes the disabled attribut but doesnt add it back
<select name="myselect" id="myselect">
<option value="shipping">Shipping</option>
<option value="Recieving" selected="selected">Reciving</option>
<option value="Storage">Storage</option>
</select>
company:<input name="company" type="text" id="company" **disabled="disabled**"/>
dock:<input name="dockingStation" type="text" id="dock" disabled="disabled" />
and jquery is
$("#myselect").chang开发者_开发问答e(function() {
var val = $(this).val();
if(val == "shipping" || val == "storage") {
$("#company").attr("disabled", true) // this works
} else { $("#company").removeAttr("disabled") .focus() } });
But now once enabled I cant disable it again
EDIT
WORKS NOW
$("#myselect").change(function() {
var val = $(this).val();
if(val == "shipping" || val == "storage") {
$("#company, #dock").prop("disabled", true)
} else {
$("#company, #dock").prop("disabled", false)
}
});
or if you prefer a shorter solution:
$("#myselect").change(function() {
var val = $(this).val();
$("#company, #dock").prop("disabled", (val == "shipping" || val == "storage"));
}).change(); // optional, set the correct state if you don't know what
// the initial selected option will be on page load
Brief explanation:
- Bind an onchange handler to the select element.
- If the selected option's value is 'shipping' or 'storage', disable the two inputs, otherwise, enable them.
See:
- http://api.jquery.com/change
- http://api.jquery.com/prop/
- http://api.jquery.com/multiple-selector/
Demo: http://jsfiddle.net/f6AZk/
精彩评论