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?

4
  • What browser do you use? Have you tried another one? Jun 9, 2010 at 10:38
  • 2
    as abatishchev ask before : did you try it in another browser and do the same ?
    – Amr Badawy
    Jun 9, 2010 at 11:58
  • 1
    and pls can you provide the html code!? Jun 9, 2010 at 12:08
  • i should have checked in a other debugging tool!!! Thank you all
    – meo
    Jun 9, 2010 at 12:23

7 Answers 7

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.

8
  • 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 9, 2010 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 9, 2010 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 9, 2010 at 13:06
  • 1
    Yes it is a Firefox bug and it still exists in the version 5.
    – Cagdas
    Jul 2, 2011 at 13:08
  • 1
    OMG, I was raging this afternoon, trying to wonder why it wasn't working. I have Firebug 1.10.6.
    – user1026130
    Nov 6, 2012 at 20:42
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

7
  • 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 9, 2010 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! Jun 9, 2010 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 9, 2010 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, 2012 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. Jun 15, 2012 at 18:50
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
  }
})
2
  • this is not the proper way of use toggleClass! Jun 9, 2010 at 12:02
  • i have just added .attr("disabled", "true"); to posted function Jun 9, 2010 at 12:10
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.

-1
$("#vp_code").textinput("enable");
$("#vp_code").textinput("disable");

you can try it

1
  • 3
    Try to explain why you think this is the appropriate solution
    – Mawcel
    Mar 11, 2017 at 12:34
-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
  }
});
-2

To add disabled attribute

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

To remove Disabled Attribute

$('#id').removeAttr('disabled');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.