How to remove disabled attribute with jQuery (IE) [duplicate]

Question

I'm in a situation where I have to use the disabled attribute to deactivate all inputs I don't want the user to edit.

<input disabled="<%= disableInputs%>" type="text"></input>

that renders

<input disabled="False" type="text"></input>

or

<input disabled="True" type="text"></input>

This works fine on Chrome and FF, but on IE it does not.

Now I'm trying to remove those attributes (where disabled="False") with javascript, but I don't get the expected results. Againt, it the javascript works gor Chrome and FF, but not for IE (using 8).

at the end it should look like:

<input type="text"></input>

or

<input disabled="True" type="text"></input>

my javascript looks like (i've tried almost any combination):

$('document').ready(function () {

$("input[disabled='false']").each(function(){$(this).attr('disabled', false);});
$("select[disabled='false']").each(function(){$(this).attr('disabled', false);});
$("input[disabled='False']").each(function(){$(this).attr('disabled', false);});
$("select[disabled='False']").each(function(){$(this).attr('disabled', false);});
$("input[readonly='false']").each(function(){$(this).attr('readonly', false);});
$("select[readonly='false']").each(function(){$(this).attr('readonly', false);});
$("input[readonly='False']").each(function(){$(this).attr('readonly', false);});
$("select[readonly='False']").each(function(){$(this).attr('readonly', false);});

$("input[disabled='false']").each(function(){$(this).removeAttr('disabled');});
$("select[disabled='false']").each(function(){$(this).removeAttr('disabled');});
$("input[disabled='False']").each(function(){$(this).removeAttr('disabled');});
$("select[disabled='False']").each(function(){$(this).removeAttr('disabled');});
$("input[readonly='false']").each(function(){$(this).removeAttr('readonly');});
$("select[readonly='false']").each(function(){$(this).removeAttr('readonly');});
$("input[readonly='False']").each(function(){$(this).removeAttr('readonly');});
$("select[readonly='False']").each(function(){$(this).removeAttr('readonly');});
});

A live example at: http://jsfiddle.net/2LNa6/ UPDATED

Lemus

it should be disabled="disabled" – Personnel

It works in the jsFiddle if you fix both the selector and the syntax error in your jsFiddle: jsfiddle.net/jfriend00/vJ559. – Cascarilla

I updated my question, I don't want to remove ALL disabled attributes, just the ones that have disabled='False' (diabled='True' must stay) – Lemus

Answer 1

You should use the .prop method in jQuery as it does sanity checking for you bypassing these annoying IE errors. I can see you're using jQuery 1.6, so this should work:

$('document').ready(function () {
    //get each input that is disabled
    $('input').each(function(i, el){
      //see if it should be disabled (true|false)
      var disabled = $(el).data('disabled');
      $(el).prop('disabled', disabled);
    });
});

Here is the updated jsFiddle for you to see.

Committeeman

I'm sry, it did not work. DoB and Gender fields should remain disabled, and only Names should be enabled. This code enables all inputs. – Lemus

Okay, I misunderstood your intention. I can see you have access to the template markup, so I would suggest you put the value in a data- attribute instead and use that to set the values. see my updated fiddle to see it in action http://jsfiddle.net/demwunz/9TmRA/9/ – Committeeman

That would work, but what if I load the js at the end? If I do so, the inputs would be enabled while the page is loading, right? – Lemus

Yes that's correct, or you can disable all of them by default by adding disabled to each input, and then just turn on the ones you need as per the updated example http://jsfiddle.net/demwunz/9TmRA/13/. You could even hide them all in css on load and show them as you loop through. – Committeeman

I guess that one gets close to what I was looking for. It requires an extra step, but it would work. Please update your answer to accept it :) – Lemus

updated as per your request :) – Committeeman

Answer 2

$('document').ready(function () {
    $("input[disabled='False']").each(function(){$(this).removeAttr('disabled');});
    $("input[disabled='false']").each(function(){$(this).removeAttr('disabled');});

}**)**

You have missed out the closing brace (highlighted in bold)

The actual code should be

$('document').ready(function () {
    $("input[disabled='disabled']").each(function(){$(this).removeAttr('disabled');});    
})

And instead of False, pass disabled. That should work fine in all browsers

Use a attribute called key to identify whether to enable the input or not. Here is the code. It will work in all browsers.

   <table class="tabla" cellpadding="0" border="0">
            <tr>
                <td>
                    <label>Names</label>
                </td>
                <td>
                    <label>DoB</label>
                </td>
                <td style="width:82px" >
                    <label>Gender</label>
                </td>
            </tr>
            <tr id="HijoCargoRow0">
                <td>
                    <input key="false" id="XXX" name="XXX" style="width:260px" type="text" value="" />
                </td>
                <td>
                    <input class="datepicker" key="true" id="YYY" name="YYY" style="width:70px" type="text" value="" />
                </td>
                <td>
                    <input key="true" id="M" name="ZZZ" type="radio" value="M" /><label for="M">M</label>
                    <input key="true"  id="F" name="ZZZ" type="radio" value="F" /><label for="F">F</label>
                </td>
          </tr>
    </table>

<script>
$(function(){
    $("input[key='true']").each(function(){
        $(this).attr('disabled','disabled')
    });
});

</script>

Personnel

I updated my question. I forgot to copy the last part and that code removes all disabled attributes :( – Lemus

You still need to change false to disabled. it should be disabled="disabled" not disabled ="false" – Personnel

but that will remove all disabled, even the ones with disabled="True" – Lemus

there is only 2 scenario. Input with disabled attribute and input without disabled attribute. There isn't anything like diabled=false. I'm not sure what you are trying to achieve. Be more specific and we can help you out – Personnel

in IE it doesn't exists, but in FF, Chrome and rest of the world disabled='false' makes sens. Or maybe I got it wrong? – Lemus

Answer 3

You have a javascript error. Add ); to the last line of your javascript and it will fix it.

Since

my bad, forgot to copy the last part – Lemus

Change your code to render: <input disabled="disabled" type="text"></input> and <input type="text"></input>. Then change your Javascript that enables disabled controls to $("input:disabled").each(function(){$(this).removeAttr('disabled');}); – Since

Answer 4

You can try a combination of the filter selector and prop method in jQuery to remove the disabled attribute from all input tags:

$("input").filter(function () {
   return $(this);
}).prop("disabled'", false);

http://api.jquery.com/filter/

Coquelicot

What I finnaly did was this: var disabledText = disableInputs ? "disabled='disabled'" : ""; and then just use that on each case, like this: <input <%= disabledText %> type="text"></input>. It's not what I was looking for, but maybe what I tried to do was not correct in the first place. – Lemus