jQuery 1.10.2, enable/disable elements, a bit tunning

Question

There is a lot written about enabling/disabling elements by jQuery, but I have a little confusion. I try to use a select and a single input field, if select is used, the field have to be disabled and vice versa.

For example

  <span>Choice a year from the list</span>
  <select id="selYear" name="selYear" >
        <option id="op-0">Choice a year</option>
        <option id="op-1" >1893      </option>
        <option id="op-2" >1894</option> 
  </select>
  <span>Or type a new one</span>
  <input id="year_single" name="year_single" type="text" >

(Of course there must be a input filter.) To disable the input field and enable it, if the first option is chosen was easy. If some body inquires how, there is the code:

  $("#selYear").change(function() {
    if(this[0].selected){           
        $("#year_single").attr("disabled",false);   
    }       
    else  
    $("#year_single").attr("disabled",true)   

})
  )

But the opposite case works not how I expected. I tried:

    $("#year_single").change(function() {
    if($(this).val().length == 0){
        //alert("aaa");
        $("#selYear").attr("disabled",false);   
    }       
    else  
    $("#selYear").attr("disabled",true)   

})

This works, but the select becomes disabled after pressing Insert key, or after clicking on it, I expected to be disabled exactly after first inserted digit in it. Probably the change() function isn't the right choice in such a case?

Use `.prop()` not `.attr()`. As the [docs state](http://api.jquery.com/attr/), "To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method." — j08691, Aug 21 '13 at 13:27
The insert key doesn't disabled the select here: http://jsfiddle.net/URPmz/. What browser are you testing with? Also, `prop` should be used for native properties. — Rory McCrossan, Aug 21 '13 at 13:29
possible duplicate of [Toggle input disabled attribute using jQuery](http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery) — Blazemonger, Aug 21 '13 at 13:30
Indeed, `change` is not the appropriate event as it is deferred until the text input loses focus ([docs](http://api.jquery.com/change/)). You could use a keyboard event like `keyup`, but then the user could still paste in text using the mouse without triggering your event handler (right click > Paste). — Mattias Buelens, Aug 21 '13 at 13:32
@Rory McCrossan - Firefox and Google Chrome. I don;t know why the Insert key works in this way. So, I changed attr to prop an used the advice from Nikolaj Zander and Mattias Buelens. Now everything works fine. — Bozhan Bozhkov, Aug 21 '13 at 13:48

score 0 · Answer 1 · answered Aug 21 '13 at 13:29

0

try to use the onkeyup event instead

$("#year_single").on("keyup", function(event){
   //YOUR CODE
});

answered Aug 21 '13 at 13:29

Nikolaj Zander

1,270
9
13

Thanks! The better way! – Bozhan Bozhkov Aug 21 '13 at 13:44

Somnath Kharat · Answer 2 · 2013-08-21T13:36:57.190

0

For your jquery version > 1.6 and .keypress event

$("#year_single").keypress(function() {
        if(this[0].selected){           
            $("#year_single").prop("disabled",false);   
        }       
        else{  
          $("#year_single").prop("disabled",true)   
        }
 });

edited Aug 21 '13 at 13:36

answered Aug 21 '13 at 13:30

Somnath Kharat

3,570
2
27
51

score 0 · Answer 3 · answered Aug 21 '13 at 13:30

jQuery .keypress() probably be of work for you:

 $("#year_single").keypress(function() {
    if($(this).val().length == 0){
        //alert("aaa");
        $("#selYear").attr("disabled",false);   
    }       
    else  
    $("#selYear").attr("disabled",true)   

})

score 0 · Answer 4 · answered Aug 21 '13 at 13:30

0

If you using jQuery 1.6+

$("input").prop('disabled', true);
$("input").prop('disabled', false);

if you are using jQuery 1.5 and below

$("input").attr('disabled','disabled');

To enable again

$("input").removeAttr('disabled');

answered Aug 21 '13 at 13:30

usman allam

274
1
5

jQuery 1.10.2, enable/disable elements, a bit tunning

4 Answers4