codeseeker codeseeker - 3 years ago 152
jQuery Question

How to disable anPHP disable and clear textbox when checkbox is unchecked. Check/uncheck checkbox depending on database

I want to disable and clear a textbox if a checkbox is uncheck and enable it when checked. At the same time, the checkbox should be dependent on the value on the database.


  • If
    deductstatus == 1
    , checkbox should be checked when loaded

  • If
    deductstatus == 2
    , checkbox should be unchecked when loaded



The code below is not working. Any help?



$(".dedstat").click(function() {
if ($(".dedstat").is(":checked")) {
$(".deductto").removeAttr("disabled")
} else {
$(".deductto").attr("disabled", "disabled")
var deductto = document.getElementById("deductto");
deductto.value = "";
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dedstat" id="dedstat" value="<?php if ($dedstat == 1) echo 'checked'; ?>">
<input type="text" name="deductto" id="deductto" value="<?php echo $deductto;?>">




Answer Source

When manipulating boolean attributes such as checked, disabled, multiple, you should be using .prop() instead of .attr() or .removeAttr(). Some other suggested improvements:

  • Use this.checked instead of $(".dedstat").is(":checked"), so that it is context specific
  • Use the ID selector instead of class
  • You can chain your jQuery methods, so you can both disable the input and empty its value at the same time
  • Listen to the change event instead of click for <input> elements

$("#dedstat").change(function() {
  if (this.checked) {
    $("#deductto").prop("disabled", false)
  } else {
    $("#deductto")
      .prop("disabled", true)
      .val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dedstat" id="dedstat">
<input type="text" name="deductto" id="deductto">

If you want the state of the input to be evaluted on pageload, you will also have to perform the same logic without binding it to the onChange event. The best way is to create a function that is called by both the onChange event and DOMready/window.load event:

// Method to conditionally enable/disable input
var updateTextInput = function(el) {
  if (el.checked) {
    $("#deductto").prop("disabled", false)
  } else {
    $("#deductto")
      .prop("disabled", true)
      .val('');
  }
}

// Call method when change event is fired from checkbox
$("#dedstat").change(function() {
  updateTextInput(this);
});

// Call method on DOMready, pass DOM node (not the jQuery object)
updateTextInput($('#dedstat')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="dedstat" id="dedstat">
<input type="text" name="deductto" id="deductto">

And with regards to your PHP, you can simply use tenary operators to conditionally write the checked prop to your input element, i.e.:

<input type="checkbox" name="dedstat" id="dedstat" <?php echo $dedstat == 1 ? 'checked' : ''; ?>>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download