如何创建一个处理复选框选择的函数？

Question

我正在处理这个简单的复选框选择，在选择单行或选择所有行时效果很好。但是，我想只有一个函数来处理复选框选择。截至目前，我有3个函数：customer_name_func，customer_lastname_func和customer_email_func。请有人帮我这个吗？这里的代码运行得很好：

＆＃13;

＆＃13;

$(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);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 使用HTML-5 data-*属性存储元素的自定义信息。

   在每个复选框上添加data-target属性，此属性的值应为相应的文本框ID

   data-target="customer-name-inputField" name="customer-name-checkbox" value="yes"
   

2. 为所有复选框添加一个公共类。

   class="myCheckbox"
   

3. 使用公共类在所有复选框上绑定事件。

   $('.myCheckbox').change(function() {
   

4. 内部事件处理程序使用$(this)和data()来获取元素data-*属性值。

   $(this).data('target')
   

5. 使用trigger('change')在复选框上触发更改事件。

现场演示：

＆＃13;
＆＃13;
$(document).ready(function() {

  $("#checkAll").change(function() {
    $('.myCheckbox').prop('checked', this.checked).trigger('change');
  });

  $('.myCheckbox').change(function() {
    $('#' + $(this).data('target')).prop('disabled', !this.checked);
  }).trigger('change');
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="checkbox" id="checkAll" />Select All

    <input type="checkbox" id="customer-name-checkbox" data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" class="myCheckbox">
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
    <input type="email" name="name" id="customer-name-inputField" />
  </div>

  <div>
    <input type="checkbox" id="customer-lastname-checkbox" data-target="customer-lastname-inputField" name="customer-lastname-checkbox" value="yes" class="myCheckbox">
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
    <input type="email" name="email" id="customer-lastname-inputField" />
  </div>
  <div>
    <input type="checkbox" id="customer-email-checkbox" data-target="customer-email-inputField" name="customer-email-checkbox" value="yes" class="myCheckbox">
    <!---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" />
  </div>
  <input type="submit" value="Send" />
</form>
＆＃13;
＆＃13;
＆＃13;

Answer 2

编写一个对复选框进行操作的单个函数，通过修改自己的名称来获取输入字段的ID。提供需要此类的所有复选框，以便您可以使用.each()。

对它们进行操作

$(document).ready(function() {

  $("#checkAll").change(function() {
    $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
        enable_disable_input(this);
    });
  });

  function enable_disable_input(checkbox) {
    var input_id = checkbox.id.replace('-checkbox', '-inputField');
    $("#" + input_id).prop('disabled', !checkbox.checked);
  }

  $(".input_checkbox").change(function() {
    enable_disable_input(this);
  });

  $(".input_checkbox").each(function() {
    enable_disable_input(this);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="checkbox" id="checkAll" />Select All
  <br/>
  <input type="checkbox" id="customer-name-checkbox" class="input_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" class="input_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" class="input_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>