Javascript 如何通过单击复选框启用输入

我有库存列表，我想从列表中创建邀请。 所有产品都有两个禁用的输入：

price

和

counts（QTY）

我试图创建一个函数，当用户点击复选框时，该函数使输入处于启用状态，但只有在点击两次后它才起作用

功能niv（id）
{
$（“输入：复选框”）。单击（函数（）{
$（'#'+id）.attr（“已禁用”、！this.checked）；
$（'#p'+id）.attr（“已禁用”！this.checked）；
});
}

HTML：

225/45/17
普利司通
普滕扎91y

650
מתוך 4 במלאי
225/45/19
普利司通
普滕扎96w

1100
מתוך 4 במלאי
225/55/17
普利司通
图兰扎跑平97y

850
מתוך 9 במלאי
225/55/18
普利司通
t001 98v

550-600
מתוך 4 במלאי
255/50/20
普利司通
Hp Sport 109v

850
מתוך 4 במלאי

您的niv功能错误。尝试将其更改为：

function niv(id) { var isCheck = $("input:checkbox[value='" + id + "']").is(':checked'); $('#'+id).prop("disabled", !isCheck); $('#p'+id).prop("disabled", !isCheck); }

225/45/17
普利司通
普滕扎91y

650
מתוך 4 במלאי
225/45/19
普利司通
普滕扎96w

1100
מתוך 4 במלאי
225/55/17
普利司通
图兰扎跑平97y

850
מתוך 9 במלאי
225/55/18
普利司通
t001 98v

550-600
מתוך 4 במלאי
255/50/20
普利司通
Hp Sport 109v

850
מתוך 4 במלאי

使用change（）事件监听器，这样做更好。 由于复选框在一个表中，我刚刚找到了父项，然后找到了该行中的所有文本输入

$('input[type="checkbox"]').change(function () {
  $(this).closest('tr').find('input[type="text"]').attr("disabled", !this.checked);
})

您会注意到，这消除了对JavaScript的内联调用，将JS代码从HTML中抽象出来。这也意味着你不需要关心ID，也不需要确保它们是合理的——可能会减少工作量，让一切变得更简单

您的代码无法运行的原因——更具体地说，它需要两次单击的原因如下：

您有一个内联单击事件，然后调用一个函数来设置侦听器。只有在调用内联单击时，才应用侦听器

第二次单击新侦听器时（使用您的逻辑），新侦听器已创建，这意味着它已被使用

此外，每次单击此复选框元素时，都会创建一个新的侦听器—这意味着在几次单击中，就会有一个复制事件侦听器的大列表

---

JSFIDLE示例：

Darren L是对的-去掉内联js（删除所有

onclick=

属性）。DL的代码工作得很好，他对问题的分析/解释做得很好。请参见本文底部的参考资料 function niv(obj) { $('#'+obj.value).prop("disabled", !obj.checked); $('#p'+obj.value).prop("disabled", !obj.checked); }

$('input[type="checkbox"]').change(function () {
  $(this).closest('tr').find('input[type="text"]').attr("disabled", !this.checked);
})