Question

我有以下安排：

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命令。每个复选框都应激活其各个框而不会相互影响。

Answer 1

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

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

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

＆＃13;

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

＆＃13;

.disabled { color: red; }

＆＃13;

<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;

Answer 2

您可以使用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>

Answer 3

使用现有代码，您只需添加以下内容：

$item

我们正在收听所有$("input[type='checkbox']").change(function() { $("button:eq(" + $(this).index() + ")").toggleClass("active"); });元素更改。
点击后，我们会获取索引并使用它来定位适当的按钮元素。

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

data-*

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

Jquery动态复选框

3 个答案: