[英]Disabling the inputs of a table row with a checkbox and vice versa
單擊復選框后,我想禁用表格中一行的輸入,但該復選框仍處於活動狀態,以便我可以再次激活一行的輸入。 並且在注冊表格后,當我再次返回該表格時,如果選中該復選框,則同一行的輸入將被禁用。 我寫了一些代碼,但請完成它。 謝謝
function DisableRow(checkBox) { var $trElement = $(checkBox).closest("tr"); $trElement.find("input").attr("disabled", "disabled"); $trElement.find("select").attr("disabled", "disabled"); } $(document).ready(function() { if ($('#checkBox').is(':checked')) { } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input class="form-control mt-1 text-sm " disabled value="@Model.ToList()[i].MablaghKhreedAnjamShode" onkeyup="javascript:this.value=itpro(this.value);" name="[@i].Saiar" required autocomplete="off" /> <input class="d-none" name="[@i].ProjectId" /> <input class="d-none" name="id" value="@Model.ToList()[i].ProjectId" /> <input class="form-control d-none" type="number" name="ListID" value="@Model.ToList()[i].ListId" /> </td> <td> <label class="switch"> <input id="theCheckBox" type="checkbox" onchange="DisableRow(this)" asp-for="@Model.ToList()[i].VazeetKhareedDarInFasle" value="True"> <span class="slider round"></span> </label> </td> <td> <select class=" mt-1 form-control" asp-for="@Model.ToList()[i].NoaeFactor" style="font-size: 12px; width: 130px" required autocomplete="off"> <option value="" default="" selected="">انتخاب کنید</option> <option value="1">خرید</option> <option value="2">برگشت از خرید</option> </select> </td> </tr> </table>
你的復選框也是輸入的,如果你不想禁用自己,你可以 select 如下: find("input[type='text']")
如果你想再次激活它,你可以嘗試: removeAttr("disabled")
我嘗試如下:
<table>
<tr>
<td>
<input type="text" id="tr1input1"/>
</td>
<td>
<input type="text" id="tr1input2"/>
</td>
<td>
<input type="checkbox" id="checkbox1" onchange="DisableRow(this)" />
</td>
</tr>
<tr>
<td>
<input type="text" id="tr2input1"/>
</td>
<td>
<input type="text" id="tr2input2"/>
</td>
<td>
<input type="checkbox" id="checkbox2" onchange="DisableRow(this)" />
</td>
</tr>
</table>
<script>
function DisableRow(e) {
var targetelement = $(e).closest('tr').find("input[type='text']")
if (e.checked == true)
{
targetelement.attr("disabled", "disabled")
}
else
{
targetelement.removeAttr("disabled")
}
}
</script>
<script>
window.onload=function () {
$("#checkbox2").attr("checked", true)
if( $("#checkbox2").is(':checked'))
{
$("#checkbox2").closest('tr').find("input[type='text']").attr("disabled", "disabled")
}
}
</script>
結果:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.