选中相应标签内的复选框时启用输入字段答案

【问题标题】：Enable an input filed when checkbox within corresponding label is checked选中相应标签内的复选框时启用输入字段
【发布时间】：2018-05-08 08:45:56
【问题描述】：

我想根据复选框启用/禁用表单中字段的编辑。如果选中复选框，则必须启用其输入，如果未选中，则禁用。我为每个字段都有一些脚本代码，但我正在寻找通用代码而不是为每个字段编写代码。谁能帮助我使用 jquery 有效地实现这一目标。

$('#nCheck').click(function() {
  $('input[name="Name"]').attr('disabled', false);
});
$('#pCheck').click(function() {
  $('input[name="Position"]').attr('disabled', false);
});
$('#oCheck').click(function() {
  $('input[name="Office"]').attr('disabled', false);
});
$('#aCheck').click(function() {
  $('input[name="Age"]').attr('disabled', false);
});
$('#dCheck').click(function() {
  $('input[name="sDate"]').attr('disabled', false);
});
$('#sCheck').click(function() {
  $('input[name="Salary"]').attr('disabled', false);
});
$('#phCheck').click(function() {
  $('input[name="Phone"]').attr('disabled', false);
});
$('#salCheck').click(function() {
  $('input[name="ProSalary"]').attr('disabled', false);
});
$('#phoneCheck').click(function() {
  $('input[name="ProPhone"]').attr('disabled', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="userForm" name="modalForm" action="" method="post">
  <div class="form-group">
    <label for="Name" class="field-label">Name <input type="checkbox" id="nCheck"/></label>
    <input class="form-control" name="Name" id="person.name" value="Tiger Nixon" disabled/>
  </div>
  <div class="form-group">
    <label for="Position" class="field-label">Position <input type="checkbox" id="pcheck"/></label>
    <input class="form-control" name="Position" id="person.position" value="System Architect" disabled/>
  </div>
  <div class="form-group">
    <label for="Office" class="field-label">Office <input type="checkbox" id="oCheck"/></label>
    <input class="form-control" name="Office" id="person.office" value="Edinburgh" disabled/>
  </div>
  <div class="form-group">
    <label for="Name" class="field-label">Age <input type="checkbox" id="aCheck"/></label>
    <input class="form-control" name="Age" id="person.age" value="61" disabled/>
  </div>
  <div class="form-group">
    <label for="Name" class="field-label">Start date <input type="checkbox" id="dCheck"/></label>
    <input class="form-control" name="sDate" id="person.sDate" value="2011/04/25" disabled/>
  </div>
  <div class="form-group">
    <label for="Name" class="field-label">Salary <input type="checkbox" id="sCheck"/></label>
    <input class="form-control" name="Salary" id="person.salary" value="$320,800" disabled/>
  </div>
  <div class="form-group">
    <label for="Name" class="field-label">Phone <input type="checkbox" id="phCheck"/></label>
    <input class="form-control" name="Phone" id="person.phone" value="123-456-7890" disabled/>
  </div>
  <div class="modal-footer" id="modal-footer">
    <button type="button" class="btn btn-primary save-btn" id="getDataBtn">Save changes</button>
  </div>
</form>

请参考下面提到的 js fiddle 是我的表单 html - https://jsfiddle.net/ycf6Ltad/1/

【问题讨论】：

标签： jquery

【解决方案1】：

您正在寻找的技术称为“不要重复自己”或“干”。

要实现这一点，您可以使用类选择器和 DOM 遍历将逻辑的公共部分提取到单个事件处理程序中。在使用find() 获取要启用/禁用的input 之前，具体使用:checkbox 选择器和closest() 方法获取父.form-group。试试这个：

$('.form-group :checkbox').on('change', function() {
  var $checkbox = $(this);
  var $group = $checkbox.closest('.form-group');
  $group.find('.form-control').prop('disabled', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="userForm" name="modalForm" action="" method="post">
  <div class="form-group">
    <label class="field-label">
      Name <input type="checkbox" id="nCheck"/>
    </label>
    <input class="form-control" name="Name" id="person.name" value="Tiger Nixon" disabled/>
  </div>
  <div class="form-group">
    <label class="field-label">
      Position <input type="checkbox" id="pcheck"/>
    </label>
    <input class="form-control" name="Position" id="person.position" value="System Architect" disabled/>
  </div>
  <div class="form-group">
    <label class="field-label">
      Office <input type="checkbox" id="oCheck"/>
    </label>
    <input class="form-control" name="Office" id="person.office" value="Edinburgh" disabled/>
  </div>
  <div class="form-group">
    <label class="field-label">
      Age <input type="checkbox" id="aCheck"/>
    </label>
    <input class="form-control" name="Age" id="person.age" value="61" disabled/>
  </div>
  <div class="form-group">
    <label class="field-label">
      Start date <input type="checkbox" id="dCheck"/>
    </label>
    <input class="form-control" name="sDate" id="person.sDate" value="2011/04/25" disabled/>
  </div>
  <div class="form-group">
    <label class="field-label">
      Salary <input type="checkbox" id="sCheck"/>
    </label>
    <input class="form-control" name="Salary" id="person.salary" value="$320,800" disabled/>
  </div>
  <div class="form-group">
    <label class="field-label">
      Phone <input type="checkbox" id="phCheck"/>
    </label>
    <input class="form-control" name="Phone" id="person.phone" value="123-456-7890" disabled/>
  </div>
  <div class="modal-footer" id="modal-footer">
    <button type="button" class="btn btn-primary save-btn" id="getDataBtn">Save changes</button>
  </div>
</form>

请注意，我将事件从 click 修改为 change，因为出于可访问性原因，它更适合与复选框一起使用。

另外，我删除了label 元素上的for 属性，因为它实际上破坏了它们的功能；因为它与子元素不匹配。无论如何，当您包装 label 包含 input 时，它不是必需的。

【讨论】：

感谢详细解释
没问题，很高兴为您提供帮助
您能否告诉我如何读取选择框的值（是/否）jsfiddle.net/ycf6Ltad/2
我想在单击 savechanges 按钮时读取选择框值。你能告诉我怎么做吗？请查看更新的小提琴jsfiddle.net/ycf6Ltad/5
该小提琴中没有select，但是您可以使用val() 来读取所选选项的值。如果您还有其他问题，我建议您提出一个新问题，因为您可能会更快地获得帮助。

【解决方案2】：

检查以下

jQuery(document).ready(function($) {
	$('input.maxtickets_enable_cb').change(function(){
		if ($(this).is(':checked'))
    $(this).next('div.max_tickets').show();
else
    $(this).next('div.max_tickets').hide();
	}).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
		<div id="opwp_woo_tickets">
			<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][0][enable]">check1
			<div class="max_tickets">
				<input type="text" name="opwp_wootickets[tickets][0][maxtickets]">
			</div>

			<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][1][enable]">check2
			<div class="max_tickets">
				<input type="text" name="opwp_wootickets[tickets][1][maxtickets]">
			</div>

			<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[tickets][2][enable]">check3
			<div class="max_tickets">
				<input type="text" name="opwp_wootickets[tickets][2][maxtickets]">
			</div>
         </div>
		</form>

【讨论】：

我想禁用/启用字段编辑。请参考我在问题中提到的 jsfiddle。我为每个字段都有一些脚本代码，但我正在寻找通用代码而不是为每个字段编写代码。你能帮忙吗