meo
meo

Reputation: 31249

.attr("disabled", "disabled") issue

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?

Upvotes: 21

Views: 152240

Answers (7)

Luca Filosofi
Luca Filosofi

Reputation: 31173

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

Upvotes: 8

Dipendra Ghatal
Dipendra Ghatal

Reputation: 7

To add disabled attribute

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

To remove Disabled Attribute

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

Upvotes: -2

sinda
sinda

Reputation: 11

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

you can try it

Upvotes: -1

meo
meo

Reputation: 31249

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.

Upvotes: 40

jin
jin

Reputation: 59

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.

Upvotes: 2

Dennis C
Dennis C

Reputation: 24747

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
  }
});

Upvotes: -2

Pranay Rana
Pranay Rana

Reputation: 176896

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
  }
})

Upvotes: 7

Related Questions