我使用JQuery,我有一个网页,列出了每行中带有单选按钮和文本框的多行。当我单击连续单选按钮时,我正在尝试启用文本框。我期待的是 - 它应该只启用/禁用该行中的文本框。它不应启用/禁用其他行中的文本框。
默认情况下,页面加载时禁用每行中的所有文本框。我研究过,当我点击一个单选按钮时,我得到了一个启用文本框的解决方案。现在当我选择另一个单选按钮时,我希望先前启用的文本框应该再次被禁用,并且现在应该启用当前行中的文本框。这就是我想要实现的目标。
我做了很多研究,大多数答案都不符合要求。请帮忙。我使用JQuery,我也尝试使用Jquery和javascripts来获得解决方案。
以下是代码:
<div class="content">
<form name="selectedMatIds" action="@{addMaterialsToBuffer()}" method="POST">
<div class="separator" style="margin-top:30px"><h4>Materials found</h4></div>
<table class="table MaterialTable" id="makeZebras">
<thead>
<tr>
<th class="alignLeft first">
Code
</th>
<th class="alignLeft">
Measure
</th>
<th class="alignLeft">
Unit
</th>
<th class="alignLeft">
New Unit
</th>
</tr>
</thead>
<tbody>
#{list items:foundList, as:'mat' }
<tr>
<td>
<input type="radio" name="selectedMatIds" id="selectedMatIds" value="${mat.id}" onclick="getMaterialID()"> ${mat.materialCode}
</td>
<td>
${mat.bum}
</td>
<td>
${mat.iumPerBum}
</td>
<td>
<div id="group">
<input type="text" id="newIUM" name="${mat.id}" value="${newIUM}" disabled>
<input type="hidden" id="oldIUM" name="oldIUM" value="${mat.iumPerBum}">
<input type="hidden" id="bum" name="bum" value="${mat.bum}">
<a id="save" onclick="loadURL1()">Save</a> <a>Cancel</a>
</div>
</td>
</tr>
#{/list}
</tbody>
<div class="actions">
<input type="submit" class="primary" value="Continue">
</div>
</table>
现在,Jquery脚本:
$("input:radio[name='selectedMatIds']").click(function() {
var isDisabled = $(this).is(":checked");
var value = $(this).val();
var textValue = $("#newIUM").val();
alert(isDisabled);
alert(value);
alert(textValue);
if(isDisabled) $("#newIUM").removeAttr("disabled");
else $("#newIUM").attr("disabled", isDisabled);
});
答案 0 :(得分:2)
$("input:radio[name='selectedMatIds']").click(function() {
var value = $(this).val();
var $closest = $(this).closest('tr'); // Find closest tr
// Find the value of the textbox in current row
var textValue = $closest.find('input[type="text"]').val();
// Disable All Text Boxes
$('.MaterialTable input[type="text"]').prop('disabled' , true);
// Only enable the textbox of the particular row
$closest.find('input[type="text"]').prop('disabled' , false);
});
答案 1 :(得分:0)
感谢您的帮助!我通过在用户单击单选按钮时将文本框内容写入隐藏文本字段,然后将此值从隐藏文本字段传递给控制器来解决此问题。