How to remove disabled attribute with jQuery (IE)

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

It works in the jsFiddle if you fix both the selector and the syntax error in your jsFiddle: http://jsfiddle.net/jfriend00/vJ559/. — jfriend00, Oct 03 '11 at 16:33
I updated my question, I don't want to remove ALL disabled attributes, just the ones that have disabled='False' (diabled='True' must stay) — Marco Bruggmann, Oct 03 '11 at 16:43

0xDonut · Accepted Answer · 2013-01-10T03:10:22.567

3

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.

edited Jan 10 '13 at 03:10

answered Jan 06 '13 at 14:06

0xDonut

595
5
24

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. – Marco Bruggmann Jan 08 '13 at 05:19
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/](http://jsfiddle.net/demwunz/9TmRA/9/) – 0xDonut Jan 08 '13 at 14:36
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? – Marco Bruggmann Jan 08 '13 at 21:40
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/](http://jsfiddle.net/demwunz/9TmRA/13/). You could even hide them all in css on load and show them as you loop through. – 0xDonut Jan 09 '13 at 02:38
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 :) – Marco Bruggmann Jan 09 '13 at 03:48
updated as per your request :) – 0xDonut Jan 10 '13 at 03:10

score 0 · Answer 2 · answered Sep 20 '13 at 14:10

0

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/

answered Sep 20 '13 at 14:10

atconway

20,624
30
159
229

What I finnaly did was this: `var disabledText = disableInputs ? "disabled='disabled'" : "";` and then just use that on each case, like this: ` type="text">`. It's not what I was looking for, but maybe what I tried to do was not correct in the first place. – Marco Bruggmann Sep 25 '13 at 05:45

Bala · Answer 3 · 2011-10-03T18:33:23.277

$('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>

I updated my question. I forgot to copy the last part and that code removes all disabled attributes :( — Marco Bruggmann, Oct 03 '11 at 16:44
You still need to change false to disabled. it should be disabled="disabled" not disabled ="false" — Bala, Oct 03 '11 at 16:48
but that will remove all disabled, even the ones with disabled="True" — Marco Bruggmann, Oct 03 '11 at 16:52
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 — Bala, Oct 03 '11 at 16:59
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? — Marco Bruggmann, Oct 03 '11 at 17:23

score 0 · Answer 4 · answered Oct 03 '11 at 16:34

0

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

answered Oct 03 '11 at 16:34

Matt Cofer

2,972
1
20
18

my bad, forgot to copy the last part – Marco Bruggmann Oct 03 '11 at 16:37
Change your code to render: and . Then change your Javascript that enables disabled controls to $("input:disabled").each(function(){$(this).removeAttr('disabled');}); – Matt Cofer Oct 03 '11 at 16:51

How to remove disabled attribute with jQuery (IE)

4 Answers4

Linked