Jquery动态复选框

我有以下安排：

复选框_1
复选框2

按钮1
按钮2

现在，我编写了一个jquery，当选中复选框\u 1时，按钮\u 1变为活动状态：

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

---

这是一个简短的例子。我真的有7个这样的组合。有没有一种方法可以用我写一次而不是7次的方式来编写jQuery命令。每个复选框都应在不影响彼此的情况下激活其各自的复选框。

首先将所有复选框指定为同一类，以便您可以将事件绑定到它们

还为复选框指定一个

data-*

属性，在本例中为

data按钮

，该属性处理相应按钮的

id

通过使用该数据属性，可以将按钮作为目标。您可以根据条件切换该类。因此，如果选中，第二个参数（条件）将为true，按钮将具有类

$（'.myCheckbox'）。在（'change'，function（）上{
$（“#”+$（this.data（'button'））.toggleClass（'disabled'，$（this.is）（'：checked'））；
});
.disabled{color:red；}

复选框1
复选框2
复选框3


按钮1
按钮2
按钮3
首先为所有复选框指定相同的类，以便将事件绑定到它们

还为复选框指定一个
data-*
属性，在本例中为
data按钮
，该属性处理相应按钮的
id

通过使用该数据属性，可以将按钮作为目标。您可以根据条件切换该类。因此，如果选中，第二个参数（条件）将为true，按钮将具有类


$（'.myCheckbox'）。在（'change'，function（）上{
$（“#”+$（this.data（'button'））.toggleClass（'disabled'，$（this.is）（'：checked'））；
});
.disabled{color:red；}

复选框1
复选框2
复选框3


按钮1
按钮2
按钮3
您可以使用
数据-*
属性，为复选框指定相应按钮的id，并设法在JavaScript中获取此信息

我对您的代码做了一个修改：


$（'.checkbox'）.change（函数（）{
var currentBtnSelector=$（此）.data（“btn”）；
如果（选中此项）{
$（'#'+currentBtnSelector）.addClass（'red'）；
}否则{
$（'#'+currentBtnSelector）.removeClass（'red'）；
}
});
.red{
背景色：红色；
}

复选框1
按钮1
复选框2
按钮2
复选框3
按钮3
您可以使用
data-*
属性为复选框指定相应按钮的id，并设法在JavaScript中获取此信息

我对您的代码做了一个修改：


$（'.checkbox'）.change（函数（）{
var currentBtnSelector=$（此）.data（“btn”）；
如果（选中此项）{
$（'#'+currentBtnSelector）.addClass（'red'）；
}否则{
$（'#'+currentBtnSelector）.removeClass（'red'）；
}
});
.red{
背景色：红色；
}

复选框1
按钮1
复选框2
按钮2
复选框3
按钮3
使用现有代码，只需添加以下内容：

$("input[type='checkbox']").change(function() {
  $("button:eq(" + $(this).index() + ")").toggleClass("active");
});

我们正在收听所有
元素的更改

单击后，我们将获得索引，并使用它来定位appropiate button元素

这样做的好处是不需要进一步的修改，但缺点是我们将复选框输入和按钮全局定位在DOM上。如果您需要缩小范围，我建议您要么遵循已经发布的
数据-*
建议，要么使用下面这样的周边容器

<div class="checkbox_group_id">
  <input type="checkbox" id="checkbox_0"/>
  <input type="checkbox" id="checkbox_1"/>
  <input type="checkbox" id="checkbox_2"/>
</div>

<div class="button_group_id">
  <button id="button_0">Button #0</button>
  <button id="button_1">Button #1</button>
  <button id="button_2">Button #2</button>
 </div>


按钮#0
按钮#1
按钮#2

从这里，您可以简单地使用容器类作为目标的前缀，将范围限制在指定的列表中。
使用现有代码，您可以简单地添加以下内容：

$("input[type='checkbox']").change(function() {
  $("button:eq(" + $(this).index() + ")").toggleClass("active");
});

我们正在收听所有
元素的更改

单击后，我们将获得索引，并使用它来定位appropiate button元素

这样做的好处是不需要进一步的修改，但缺点是我们将复选框输入和按钮全局定位在DOM上。如果您需要缩小范围，我建议您要么遵循已经发布的
数据-*
建议，要么使用下面这样的周边容器

<div class="checkbox_group_id">
  <input type="checkbox" id="checkbox_0"/>
  <input type="checkbox" id="checkbox_1"/>
  <input type="checkbox" id="checkbox_2"/>
</div>

<div class="button_group_id">
  <button id="button_0">Button #0</button>
  <button id="button_1">Button #1</button>
  <button id="button_2">Button #2</button>
 </div>


按钮#0
按钮#1
按钮#2

从这里，您可以简单地使用container类作为目标的前缀，将作用域限制在指定的列表中。
是的，但如何执行将取决于它们在DOM中的显示方式。是的，但如何执行将取决于它们在DOM中的显示方式。