jQuery checkbox to enable/disable text input and a

2019-03-31 01:05发布

问题:

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!

回答1:

Working jsFiddle Demo

  1. Use .is(':checked').
  2. You must compare two values with ==.
  3. 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


回答2:

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