Jquery动态复选框

时间:2018-03-21 20:45:28

标签: jquery

我有以下安排:

checkbox_1
checkbox_2

button_1
button_2

现在我写了一个jquery,当checkbox_1被选中时,button_1变为活动状态:

$('#checkbox_1').change(function() {
  if (this.checked) {
    $('#btn_1').removeClass('disabled');
  } else {
    $('#btn_1').addClass('disabled');
  }
});

这是一个简短的例子。我真的有7个这样的组合。有没有办法以我写一次而不是7次的方式编写jQuery命令。每个复选框都应激活其各个框而不会相互影响。

3 个答案:

答案 0 :(得分:3)

首先将所有复选框都设为相同的类,这样就可以将事件绑定到它们。

同时为复选框提供data-*属性,在本例中为data-button,该属性与相应按钮的id匹配。

通过使用该数据属性,您可以定位按钮。您可以使用条件切换班级。因此,如果选中它,则第二个参数(条件)将为true,并且该按钮将具有该类。



$('.myCheckbox').on('change', function() {
  $("#"+$(this).data('button') ).toggleClass( 'disabled', $(this).is(':checked') );
});

.disabled { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="myCheckbox" data-button="button1" /> Checkbox 1
<input type="checkbox" class="myCheckbox" data-button="button2" /> Checkbox 2
<input type="checkbox" class="myCheckbox" data-button="button3" /> Checkbox 3
<br />
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用data-*属性为您的复选框添加相应按钮的ID,并设法在您的JavaScript中获取此信息。

我做了一个改编你的代码的例子:

$('.checkBoxes').change(function() {
  var currentBtnSelector = $(this).data("btn");
  if (this.checked) {
    $('#' + currentBtnSelector).addClass('red');
  } else {
    $('#' + currentBtnSelector).removeClass('red');
  }
});
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="checkBox1" class="checkBoxes" type="checkbox" data-btn="btn1">
  <label for="checkBox1">Checkbox1</label>
  <button id="btn1">button1</button>
</div>

<div>
  <input id="checkBox2" class="checkBoxes" type="checkbox" data-btn="btn2">
  <label for="checkBox2">Checkbox2</label>
  <button id="btn2">button2</button>
</div>

<div>
  <input id="checkBox3" class="checkBoxes" type="checkbox" data-btn="btn3">
  <label for="checkBox3">Checkbox3</label>
  <button id="btn3">button3</button>
</div>

答案 2 :(得分:0)

使用现有代码,您只需添加以下内容:

$item
  1. 我们正在收听所有$("input[type='checkbox']").change(function() { $("button:eq(" + $(this).index() + ")").toggleClass("active"); }); 元素更改。

  2. 点击后,我们会获取索引并使用它来定位适当的按钮元素。

  3. 这样做的好处是不需要进一步修改,但缺点是我们在DOM上全局定位复选框输入和按钮。如果您需要缩小范围,我建议您遵循已经发布的<input type="checkbox"/>建议,或者使用下面的周围容器。

    data-*

    从那里,你可以简单地在目标前面加上容器类,将范围限制在指定的列表中。