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

时间：2018-05-08 08:45:57

标签： jquery

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

＆＃13;
＆＃13; 
$('#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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：2)

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

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

$('.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，因为出于辅助功能原因，我们首选使用复选框。

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

答案 1 :(得分：0)

检查以下

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>

相关问题
最新问题