mardi 31 mai 2016

How to create a single function that handles checkbox selection?

I'm working on this simple checkbox selection that works just fine when selecting a single row or selecting all the rows. However, I would like to have only one function that handles the checkbox selection. As of right now I have 3 functions called: customer_name_func , customer_lastname_func and customer_email_func. Can someone help me on this please? Here's my code that works just fine:

$(document).ready(function() {

  $("#checkAll").change(function() {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
    $(customer_name_func);
    $(customer_lastname_func);
    $(customer_email_func);
  });

  var customer_name_func = function() {
    if ($("#customer-name-checkbox").is(":checked")) {
      $('#customer-name-inputField').prop('disabled', false);
    } else {
      $('#customer-name-inputField').prop('disabled', 'disabled');
    }
  };
  $(customer_name_func);
  $("#customer-name-checkbox").change(customer_name_func);

  var customer_lastname_func = function() {
    if ($("#customer-lastname-checkbox").is(":checked")) {
      $('#customer-lastname-inputField').prop('disabled', false);
    } else {
      $('#customer-lastname-inputField').prop('disabled', 'disabled');
    }
  };
  $(customer_lastname_func);
  $("#customer-lastname-checkbox").change(customer_lastname_func);

  var customer_email_func = function() {
    if ($("#customer-email-checkbox").is(":checked")) {
      $('#customer-email-inputField').prop('disabled', false);
    } else {
      $('#customer-email-inputField').prop('disabled', 'disabled');
    }
  };
  $(customer_email_func);
  $("#customer-email-checkbox").change(customer_email_func);

});
<script src="http://ift.tt/1qRgvOJ"></script>
<form>
  <input type="checkbox" id="checkAll" />Select All
  <br/>
  <input type="checkbox" id="customer-name-checkbox" name="customer-name-checkbox" value="yes">
  <!---echo php customerName value from WS--->
  <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
  <input type="email" name="name" id="customer-name-inputField" />
  <br/>
  <br/>

  <input type="checkbox" id="customer-lastname-checkbox" name="customer-lastname-checkbox" value="yes">
  <!---echo php customerLastName value from WS--->
  <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
  <input type="email" name="email" id="customer-lastname-inputField" />
  <br/>
  <br/>

  <input type="checkbox" id="customer-email-checkbox" name="customer-email-checkbox" value="yes">
  <!---echo php customerPhoneNumber value from WS--->
  <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
  <input type="email" name="email" id="customer-email-inputField" />
  <br/>
  <br/>

  <input type="submit" value="Send" />
</form>



Aucun commentaire:

Enregistrer un commentaire