如何在每行中重复的表td中使用(重复)单选按钮

时间:2016-04-28 09:44:25

标签: jquery html

我有一个包含行数的表,在一个表中有一个单选按钮,单选按钮重复但不起作用,我也无法更改我的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&nbsp;&nbsp; Value &nbsp;&nbsp;&nbsp;&nbsp;overwrite&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="ruleList[0].ruleAssignmentParameter[0].overwriteValue" value=""size="2"height="0.01">&nbsp;or&nbsp; 
                                            <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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="ruleList[0].ruleAssignmentParameter[1].overwriteValue" value=""size="2"height="0.01">&nbsp;or&nbsp; 
                                            <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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="ruleList[0].ruleAssignmentParameter[2].overwriteValue" value=""size="2"height="0.01">&nbsp;or&nbsp; 
                                            <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>&nbsp;&nbsp;<input type="radio" name="ruleList[].fixed" value="fixed" /></td>
                            <td>&nbsp;&nbsp; <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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="ruleList[1].ruleAssignmentParameter[0].overwriteValue" value=""size="2"height="0.01">&nbsp;or&nbsp; 
                                            <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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="ruleList[1].ruleAssignmentParameter[1].overwriteValue" value=""size="2"height="0.01">&nbsp;or&nbsp; 
                                            <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>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="ruleList[1].ruleAssignmentParameter[2].overwriteValue" value=""size="2"height="0.01">&nbsp;or&nbsp; 
                                            <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做到?

谢谢你!

2 个答案:

答案 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