[jquery] Detect when input has a 'readonly' attribute

I want to throw an alert when an input has a 'readonly' attribute. I have tried this:

  if($('input').attr('readonly') == 'readonly'){

    alert("foo");
  }

I think that 'if' is not even the best way to do it.

Check the current value of your "readonly" attribute, if it's "false" (a string) or empty (undefined or "") then it's not readonly.

$('input').each(function() {
    var readonly = $(this).attr("readonly");
    if(readonly && readonly.toLowerCase()!=='false') { // this is readonly
        alert('this is a read only field');
    }
});

Since JQuery 1.6, always use .prop() Read why here: http://api.jquery.com/prop/

if($('input').prop('readonly')){ }

.prop() can also be used to set the property

$('input').prop('readonly',true);

$('input').prop('readonly',false);

try this:

if($('input').attr('readonly') == undefined){
    alert("foo");
}

if it is not there it will be undefined in js

what about javascript without jQuery ?

for any input that you can get with or without jQuery, just :

input.readOnly

note : mind camelCase

Try a simple way:

if($('input[readonly="readonly"]')){
   alert("foo");
}

You can just use the attribute selector and then test the length:

$('input[readonly]').length == 0 // --> ok
$('input[readonly]').length > 0  // --> not ok

In vanilla/pure javascript you can check as following -

var field = document.querySelector("input[name='fieldName']");
if(field.readOnly){
 alert("foo");
}