开发者

disable the input if selected from an item

开发者 https://www.devze.com 2023-03-13 03:09 出处:网络
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

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消