jQuery checkbox to enable/disable text input and add/remove default value

Question

I am trying to create a small reusable function that will, when checked, disable a text field and insert a default value of '160', and when unchecked, enable the field and remove the value. I have it mostly finished but the unchecking part is throwing me off.

$('#chkIsTeamLead').change(function(){


   if ($('#chkIsTeamLead').checked = true){
      $('#txtNumHours').val('160').attr('disabled', 'disabled');
      console.log('checked');
   }

  if ($('#chkIsTeamLead').checked = false){
     $('#txtNumHours').val('').removeAttr('disabled');
     console.log('unchecked');
   }

});

I had it setup as a reusable function with arguments passed to it but that was giving me more trouble, I would like the arguments to be checkbox, target, and value preferably link to my current code: http://codepen.io/AlexBezuska/pen/bwgsA Thanks for any help you can provide!

Use $('#chkIsTeamLead').is(':checked') in your conditions. — user1823761
– user1823761, Commented May 29, 2013 at 6:23
I had it setup as a reusable function with arguments passed to it but that was giving me more trouble What trouble ? Can you post that code where you tried to pass arguments as well ? — SachinGutte
– SachinGutte, Commented May 29, 2013 at 6:30

user1823761 · Accepted Answer · 2013-05-29 06:29:31Z

14

Working jsFiddle Demo

Use .is(':checked').
You must compare two values with ==.
When you are working with attribute like disabled, it's better to use .prop() method instead of .attr().

$('#chkIsTeamLead').change(function(){
    if ($('#chkIsTeamLead').is(':checked') == true){
        $('#txtNumHours').val('160').prop('disabled', true);
        console.log('checked');
    } else {
        $('#txtNumHours').val('').prop('disabled', false);
        console.log('unchecked');
    }
});

References:

.attr() - jQuery API Documentation
.prop() - jQuery API Documentation
.is() - jQuery API Documentation

answered May 29, 2013 at 6:29

user1823761

Sign up to request clarification or add additional context in comments.

5 Comments

krishwader Over a year ago

I think ==true isnt necessary as if will work that out by itself

user1823761 Over a year ago

@passionateCoder Yes, I just left it there for == to show OP.

krishwader Over a year ago

also , Doug Crockford would kill you if you didnt use === instead of == :P

user1823761 Over a year ago

@passionateCoder Yesssssss, I love him ;).

glasses Over a year ago

This works great, thanks, and thanks for the direction on .prop(), I will have to read this over and learn more about it.

Mayank Awasthi · Accepted Answer · 2013-05-29 06:29:24Z

1

try this

$('#chkIsTeamLead').change(function(){


   if ($('#chkIsTeamLead').is(':checked')){
      $('#txtNumHours').val('160').attr('disabled', 'disabled');
      console.log('checked');
   } else {
     $('#txtNumHours').val('');
    $('#txtNumHours').removeAttr('disabled');
     console.log('unchecked');
   }
 });

answered May 29, 2013 at 6:29

Mayank Awasthi

3374 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery checkbox to enable/disable text input and add/remove default value

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related