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

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)" 

这样一来，新证功能将是：

 
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（）事件侦听器，更适合于此目的。 由于复选框位于表格中，我刚刚找到了父项<tr>，然后找到该行内的所有文本输入。

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

您会注意到这会消除对JavaScript的内联调用，从HTML中抽象出您的JS代码。这也意味着你不需要关心身份证，并确保他们合理 - 可能会减少BE的工作量，并使一切变得更加简单。

你的代码没有工作的原因 - 它为什么需要2次点击，更具体如下：

你有一个内嵌的点击事件 - 然后调用一个函数来设置一个监听器。只有在调用内联点击时，才会应用侦听器。

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

此外，每次单击此复选框元素时，都会创建一个新的侦听器 - 这意味着在几次点击之后，会有一个重复事件侦听器的大型列表。

的jsfiddle例如：https://jsfiddle.net/likestothink/kgL4q0jg/