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

How to enable an input by clicking a checkbox

本文关键字：启用 输入 复选框 单击 何通过      更新时间：2023-09-26

我有库存列表，我想从列表中创建邀请。所有产品都有 2 个输入：禁用的price和counts (qtys)。

我尝试创建在用户单击复选框时启用输入的功能，但它仅在单击两次后才能工作......

function niv(id)
{
    $("input:checkbox").click(function() {
        $('#'+id).attr("disabled", !this.checked); 
        $('#p'+id).attr("disabled", !this.checked); 
    });
}

该 HTML：

<tr class="even">
    <td>225/45/17</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Putenza <h6>91y</h6></td>
    <td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
    <td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
    <td>225/45/19</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Putenza <h6>96w</h6></td>
    <td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
    <td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
    <td>225/55/17</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Turanza runflat <h6>97y</h6></td>
    <td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
    <td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr>
<tr class="even">
    <td>225/55/18</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>t001 <h6>98v</h6></td>
    <td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
    <td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
    <td>255/50/20</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Hp Sport <h6>109v</h6></td>
    <td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
    <td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>

你的 niv 函数是错误的。尝试将其更改为：

函数 niv（id）{   var isCheck = $（"input：checkbox[value='" + id + "']"）.is（'：checked'）;   $（'#'+id）.prop（"disabled"， ！isCheck）;   $（'#p'+id）.prop（"disabled"， ！isCheck）;}

另一种可能的解决方案是在调用中将此值传递给 niv 函数：

onclick="niv（this）"

因此，新的 niv 函数将是：

函数 NIV（obj）{   $（'#'+obj.value）.prop（"disabled"， ！obj.checked）;   $（'#p'+obj.value）.prop（"disabled"， ！obj.checked）;}

我的片段：

function niv(id)
{
  var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
  $('#'+id).prop("disabled", !isCheck);
  $('#p'+id).prop("disabled", !isCheck);
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table>
    <tr class="even">
        <td>225/45/17</td>
        <td id=Bridgestone>Bridgestone</td>
        <td>Putenza <h6>91y</h6></td>
        <td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
        <td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
        <td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
    </tr><tr class="even">
    <td>225/45/19</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Putenza <h6>96w</h6></td>
    <td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
    <td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
    <td>225/55/17</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Turanza runflat <h6>97y</h6></td>
    <td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
    <td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr><tr class="even">
    <td>225/55/18</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>t001 <h6>98v</h6></td>
    <td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
    <td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
    <td>255/50/20</td>
    <td id=Bridgestone>Bridgestone</td>
    <td>Hp Sport <h6>109v</h6></td>
    <td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
    <td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
    <td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
</table>

使用 change（） 事件侦听器，它更适合此目的。由于复选框位于表中，因此我刚刚找到了父级

，然后在该行中找到了所有文本输入。 
$('input[type="checkbox"]').change(function () {
  $(this).closest('tr').find('input[type="text"]').attr("disabled", !this.checked);
})

你会注意到，这取消了对JavaScript的内联调用，从HTML中抽象出你的JS代码。这也意味着您无需担心 ID 并确保它们是合理的 - 可能会减少 BE 工作负载并使一切变得更加简单。

您的代码不起作用的原因 - 更具体地说，为什么它需要两次单击，如下所示：

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

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

此外，每次单击此复选框元素时，都会创建一个新的侦听器 - 这意味着只需单击几下，就会出现一大堆重复的事件侦听器。

jsFiddle 示例：https://jsfiddle.net/likestothink/kgL4q0jg/

相关文章：