我有一个包含行数的表,在一个表中有一个单选按钮,单选按钮重复但不起作用,我也无法更改我的dropdown_list名称,所以如何解决这个问题请帮助我。
<script>
$('input[name="radio_enable"]').on('click', function() {
if ($(this).val() === 'true') {
$('#item_dropdown_list').removeProp("disabled");
}
else {
$('#item_dropdown_list').prop("disabled", "disabled");
}
});disabled
</script>
<html>
<table border="1">
<thead>
<h3 align="center">Selected Rule</h3>
<tr>
<th data-field="id" width="25"> ID </th>
<th data-field="details" width="20"> RuleName </th>
<th data-field="repeats" width="100"> Repeats </th>
</tr>
<tbody>
<c:forEach items="${List2}" var="as">
<tr>
<td> ${as.rule.id}</td>
<td> ${as.rule.ruleName}"</td>
<td><input type="radio" data-select="#item_dropdown_list1" name="radio_enable1" value="true">
<select id="item_dropdown_list1" name="item[dropdown_list]" disabled="disabled" name="ruleList[].repeats" style="width: 80px;">
<c:forEach items="${listfrequency}" var="freq">
<option value="${freq.frequencyName}" />
<c:out value="${freq.frequencyName}" />
</c:forEach>
</select>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</html>
编辑(生成的Html)
<html>
<script>
$('input[type="radio"]').on('click', function() {
var val = $(this).val(),
selectId = $(this).closest('tr').find('select');
if ($(this).val() === 'true') {
$(selectId).prop("disabled", false);
}
else {
$(selectId).prop("disabled", true);
}
});
</script>
<div>
<form id="ruleListForm" action="/update" method="post">
<table border="1">
<thead>
<tr>
<th data-field="id"> ID </th>
<th data-field="ruleName" > RuleName </th>
<th data-field="fixed" > Fixed </th>
<th data-field="repeats" > Repeats </th>
<th data-field="parameter" >Parameter Value overwrite </th>
</tr>
</thead>
<tbody id="ruleListContainer">
<tr class="rule">
<td><input type="hidden" name="ruleList[0].id" value="2" /> 2</td>
<td><input type="hidden" name="ruleList[0].ruleName" value="ABCDEFGH" /> ABCDEFGH</td>
<td><input type="radio" name="ruleList[].fixed" value="fixed" /></td>
<td><input type="radio" value="true">
<select name="ruleList[].repeats" style="width: 80px;">
<option value="">--Select--</option>
<option value="weekly" />
weekly
<option value="monthly" />
monthly
<option value="quaterly" />
quaterly
<option value="half-yearly" />
half-yearly
<option value="annually" />
annually
</select>
</td>
<td>
<table border="1">
<tr >
<td><input type="hidden" name="ruleList[0].ruleAssignmentParameter[0].parameterName" value="Param 9" /> Param 9</td>
<td><input type="hidden" value="6549" /> 6549</td>
<td> <input type="text" name="ruleList[0].ruleAssignmentParameter[0].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="Minimum Sales"/>Minimum Sales
<option value="Service Amount"/>Service Amount
<option value="Promotional Sales"/>Promotional Sales
<option value="New Product Sales"/>New Product Sales
<option value="Sale Remotely"/> Sale Remotely
</select></td></tr>
<tr >
<td><input type="hidden" name="ruleList[0].ruleAssignmentParameter[1].parameterName" value="Param 7" /> Param 7</td>
<td><input type="hidden" value="1234" /> 1234</td>
<td> <input type="text" name="ruleList[0].ruleAssignmentParameter[1].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="">--Select--</option>
<option value="Minimum Sales"/>
Minimum Sales
<option value="Service Amount"/>
Service Amount
<option value="Promotional Sales"/>
Promotional Sales
<option value="New Product Sales"/>
New Product Sales
<option value="Sale Remotely"/>
Sale Remotely
</select>
</td>
</tr>
<tr >
<td><input type="hidden" name="ruleList[0].ruleAssignmentParameter[2].parameterName" value="Param 12" /> Param 12</td>
<td><input type="hidden" value="7869" /> 7869</td>
<td> <input type="text" name="ruleList[0].ruleAssignmentParameter[2].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="">--Select--</option>
<option value="Minimum Sales"/>
Minimum Sales
<option value="Service Amount"/>
Service Amount
<option value="Promotional Sales"/>
Promotional Sales
<option value="New Product Sales"/>
New Product Sales
<option value="Sale Remotely"/>
Sale Remotely
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr class="rule">
<td><input type="hidden" name="ruleList[1].id" value="1" /> 1</td>
<td><input type="hidden" name="ruleList[1].ruleName" value="XYZ" /> XYZ</td>
<td> <input type="radio" name="ruleList[].fixed" value="fixed" /></td>
<td> <input type="radio" value="true">
<select name="ruleList[].repeats" style="width: 80px;">
<option value="">--Select--</option>
<option value="weekly" />
weekly
<option value="monthly" />
monthly
<option value="quaterly" />
quaterly
<option value="half-yearly" />
half-yearly
<option value="annually" />
annually
</select>
</td>
<td>
<table border="1">
<tr >
<td><input type="hidden" name="ruleList[1].ruleAssignmentParameter[0].parameterName" value="Param 1" /> Param 1</td>
<td><input type="hidden" value="600" /> 600</td>
<td> <input type="text" name="ruleList[1].ruleAssignmentParameter[0].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="">--Select--</option>
<option value="Minimum Sales"/>
Minimum Sales
<option value="Service Amount"/>
Service Amount
<option value="Promotional Sales"/>
Promotional Sales
<option value="New Product Sales"/>
New Product Sales
<option value="Sale Remotely"/>
Sale Remotely
</select>
</td>
</tr>
<tr >
<td><input type="hidden" name="ruleList[1].ruleAssignmentParameter[1].parameterName" value="Param 2" /> Param 2</td>
<td><input type="hidden" value="4300" /> 4300</td>
<td> <input type="text" name="ruleList[1].ruleAssignmentParameter[1].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="">--Select--</option>
<option value="Minimum Sales"/>
Minimum Sales
<option value="Service Amount"/>
Service Amount
<option value="Promotional Sales"/>
Promotional Sales
<option value="New Product Sales"/>
New Product Sales
<option value="Sale Remotely"/>
Sale Remotely
</select>
</td>
</tr>
<tr >
<td><input type="hidden" name="ruleList[1].ruleAssignmentParameter[2].parameterName" value="Param 3" /> Param 3</td>
<td><input type="hidden" value="1750" /> 1750</td>
<td> <input type="text" name="ruleList[1].ruleAssignmentParameter[2].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="">--Select--</option>
<option value="Minimum Sales"/>
Minimum Sales
<option value="Service Amount"/>
Service Amount
<option value="Promotional Sales"/>
Promotional Sales
<option value="New Product Sales"/>
New Product Sales
<option value="Sale Remotely"/>
Sale Remotely
</select>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="Update">
</form>
</div>
</html>
我在不同的td有两个单选按钮,当我选择一个td的另一个单选按钮时应该禁用,但是它不能正常工作,
如何用jquery做到?
谢谢你!答案 0 :(得分:0)
首先,请参阅why you should use prop
*编辑*
假设你有多行,每个输入无线电指的是相对行选择,你可以这样做。
将数据属性设置为无线电,指向必须更新的选择ID:
<input type="radio" data-select="#item_dropdown_list1" name="radio_enable1" value="true"> True<br>
<input type="radio" data-select="#item_dropdown_list1" name="radio_enable1" value="false"> False<br>
select元素必须具有如下ID:
<select id="item_dropdown_list1" name="item[dropdown_list]" disabled="disabled" name="ruleList[].repeats" style="width: 80px;">
<option value="${freq.frequencyName}" />
</select>
然后在jQuery中你可以这样做:
$('input[type="radio"]').on('click', function() {
var val = $(this).val(),
selectId = $(this).data('select');
if ($(this).val() === 'true') {
$(selectId).prop("disabled", false);
}
else {
$(selectId).prop("disabled", true);
}
});
请参阅此updated FIDDLE
中的示例答案 1 :(得分:0)
您需要对代码进行一些更改。
首先,单行 固定和重复列中的2输入广播必须具有相同的名称属性。像这样:
<td><input type="radio" name="radio_enable_0" value="fixed"></td>
<td><input type="radio" name="radio_enable_0" value="true"></td>
但是,这个名称必须为循环中的每一行更改,如下所示:
<!-- first row -->
...
<td><input type="radio" name="radio_enable_0" value="fixed"></td>
<td><input type="radio" name="radio_enable_0" value="true"></td>
...
<!-- second row -->
...
<td><input type="radio" name="radio_enable_1" value="fixed"></td>
<td><input type="radio" name="radio_enable_1" value="true"></td>
...
为此,我们需要在c:forEach
循环中使用 index variable :<input type="radio" name="radio_enable_${as.index}">
。
请尝试使用此代码进行循环:
<c:forEach items="${List2}" var="as">
<tr>
<td> ${as.rule.id}</td>
<td> ${as.rule.ruleName}"</td>
<td> <input type="radio" name="radio_enable_${as.index}" value="fixed"> </td>
<td>
<input type="radio" name="radio_enable_${as.index}" value="true">
<select id="item_dropdown_list1" name="item[dropdown_list]" disabled name="ruleList[].repeats" style="width: 80px;">
<c:forEach items="${listfrequency}" var="freq">
<option value="${freq.frequencyName}" />
<c:out value="${freq.frequencyName}" />
</c:forEach>
</select>
</td>
</tr>
</c:forEach>
然后在jquery中你可以做到:
$('input[type="radio"]').on('click', function() {
var val = $(this).val(),
selectId = $(this).closest('tr').find('select').first();
if ($(this).val() === 'true') {
$(selectId).prop("disabled", false);
}
else {
$(selectId).prop("disabled", true);
}
});
这是最后的JSFIDDLE