如何通過點擊複選框啓用輸入

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/