21

I have this function toggles the disabled attribute form a input field: 

$('.someElement').click(function(){     
  if (someCondition) {
     console.log($target.prev('input')) // gives out the right object
     $target.toggleClass('open').prev('input').attr('disabled', 'disabled');
  }else{
     $target.toggleClass('open').prev('input').removeAttr('disabled'); //this works
  }
})

the removeAttr works fine but when i need to add the disabled again it does just nothing. My console.log is triggered (and giving me back the right input field) so I'm sure that my if statement works. But when I inspect the DOM with firebug in firefox, the disabled attribute does not appear.

can someone help me?

PS: please don't focus on the function or the if statement itself, works fine its just that attr that does not work for disabled...

edit: its an input type="hidden" is it possible that disabled does not work on hidden fields?

meo
  • 30,872
  • 17
  • 87
  • 123

7 Answers7

40

Thank you all for your contribution! I found the problem:

ITS A FIREBUG BUG !!!

My code works. I have asked the PHP Dev to change the input types hidden in to input type text. The disabled feature works. But the firebug console does not update this status!

you can test out this firebug bug by your self here http://jsbin.com/uneti3/3#. Thx to aSeptik for the example page.

update: 2. June 2012: Firebug in FF11 still has this bug.

Maxime
  • 8,645
  • 5
  • 50
  • 53
meo
  • 30,872
  • 17
  • 87
  • 123
  • 1
    thats not actually desiable, its just the param with no value, witch means it stays defualt. you should do disabled="1" to actually disable it :/ – RobertPitt Jun 09 '10 at 13:01
  • 7
    no you should use disabled="disabled" to be w3c. And this is exactly what my code does if you read my initial post – meo Jun 09 '10 at 13:04
  • The problem you were having wasn't from Firebug not updating the status, it's with your code. aSeptik's answer is right. If you don't believe me, run your code in Chrome or IE. – Mottie Jun 09 '10 at 13:06
  • so test it. Go to aSeptiks example open firebug and change click on the button. As you can see firebug does not update the disabled status. But as you can see visually the status change happens. – meo Jun 09 '10 at 13:12
  • 1
    Yes it is a Firefox bug and it still exists in the version 5. – Cagdas Jul 02 '11 at 13:08
  • 1
    OMG, I was raging this afternoon, trying to wonder why it wasn't working. I have Firebug 1.10.6. –  Nov 06 '12 at 20:42
  • same reason as mentioned by @HelloWorld haha – periback2 Feb 03 '14 at 15:58
  • Can you please re-upload the image? – A.L Feb 13 '15 at 12:45
8

UPDATED

DEMO: http://jsbin.com/uneti3/3

your code is wrong, it should be something like this:

 $(bla).click(function() { 
        var disable =  $target.toggleClass('open').hasClass('open');
       $target.prev().prop("disabled", disable);
  });

you are using the toggleClass function in wrong way

Luca Filosofi
  • 30,905
  • 9
  • 70
  • 77
  • Why do i use it wrong? i just just specify a class and it toggle this one class. This par works fine. (Just like the jquery doc tells me). But still i have tried to do it this way and it does not work to. – meo Jun 09 '10 at 12:03
  • the jquery doc say the opposite of what you have done! the doc say that you can use one line of code fo make the same if statment you have! see my updates! – Luca Filosofi Jun 09 '10 at 12:06
  • yeah sure its not proper put its not wrong i could just use addclass and remove class but i was lazy ;P but this was not the problem. The problem is that firebug does not change the disabled status in the DOM even if it does. My code works, i just did not see id because my input types where hidden. Thanks for the optimized code, i have adapted it. +1 – meo Jun 09 '10 at 12:28
  • In terms of HTML attributes, `disabled="true"` is incorrect. If `disabled` exists, its only possible value is `disabled`, as in `disabled="disabled"`. If an entity is enabled, the `disabled` tag is omitted altogether, hence the usage of jquery's `removeAttr` function. – Mattygabe Jun 15 '12 at 15:07
  • @Mattygabe: i think you missed the jQuery point; jQuery true/false is used as short-hand, it simply auto-detect and add/remove (not enable) the property. So if true the property will be disabled if false the property will be removed. – Luca Filosofi Jun 15 '12 at 18:50
  • @aSeptik Ah, good point. Another jQuery abstraction I was unaware of. – Mattygabe Jun 16 '12 at 00:59
  • changed attr with prop – Luca Filosofi Jun 02 '17 at 20:12
7

Try this updated code : 

$(bla).click(function(){        
  if (something) {
     console.log($target.prev("input")) // gives out the right object
     $target.toggleClass("open").prev("input").attr("disabled", "true");
  }else{
     $target.toggleClass("open").prev("input").removeAttr("disabled"); //this works
  }
})
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
2

I was facing the similar issue while toggling the disabled state of button! After firing the removeProp('disabled') the button refused to get "disabled" again! I found an interesting solution : use prop("disabled",true) to disable the button and prop("disabled",false) to re-enable it! Now I was able to toggle the "disabled" state of my button as many times I needed! Try it out.

sschrass
  • 7,014
  • 6
  • 43
  • 62
jin
  • 59
  • 5
-1
$("#vp_code").textinput("enable");
$("#vp_code").textinput("disable");

you can try it

sinda
  • 11
-2

Try

$(bla).click(function(){        
  if (something) {
     console.log("A:"+$target.prev("input")) // gives out the right object
     $target.toggleClass("open").prev("input").attr("disabled", "disabled");
  }else{
     console.log("A:"+$target.prev("input")) // any thing from there for a single click?
     $target.toggleClass("open").prev("input").removeAttr("disabled"); //this works
  }
});
Dennis C
  • 24,511
  • 12
  • 71
  • 99
-2

To add disabled attribute 

$('#id').attr("disabled", "true");

To remove Disabled Attribute

$('#id').removeAttr('disabled');
Dipendra Ghatal
  • 7
  • 2