Question

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

我试图创建一个功能，当用户点击复选框时启用输入，但只有在点击2次后它才有效...

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>

Answer 1

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

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

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

onclick="niv(this)"

所以新的niv功能将是：

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

Answer 2

使用change（）事件监听器，它可以更好地实现此目的。由于复选框位于表格中，我刚刚找到了父级＆lt; tr＆gt;然后找到该行中的所有文本输入。

$('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/

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

2 个答案: