How to use(repeats) radio button in a table td which is repeate in every row

Question

I have a table with number of rows and in a table there is a radio button, the radio button is repeated but its not work, i can't change my dropdown_list name also, so how to overcome this problem please help me.

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

Edited(generated 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>

I have two radio button in different td, when i select one radio button of one td another should be disable,but its not working,

How can I do it with jquery?

thank you!

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

first, see why you should use prop

* EDIT *

Assuming you have multiple rows and each input radio refers to the relative row select, you can do something like this.

Set a data attribute to the radio, that point to the ID of select that must update:

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

the select element then must have an ID like this:

<select id="item_dropdown_list1" name="item[dropdown_list]"  disabled="disabled" name="ruleList[].repeats" style="width: 80px;">
    <option value="${freq.frequencyName}" />                         
</select>

Then in jQuery you can do:

$('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);
    }
});

see my example in this updated FIDDLE

edited May 23 '17 at 12:16

Community

1
1

answered Apr 28 '16 at 10:08

pumpkinzzz

2,907
2
18
32

I applied your code but still its not enable the dropdown list after click in true radio button, actuly i have only one radio button, my requirement is when i click that radio button the dropdown will enable in a row. when again in another row i will select the radio button it will be selected. – Emad Apr 28 '16 at 10:48
@Emad have u added the correct ID for each select? like, first select in the first row will have `id="item_dropdown_list1"`, second `id="item_dropdown_list2"`, and so on..? – pumpkinzzz Apr 28 '16 at 10:54
the table is populate from data base and that radio button will repeat in every row in a table – Emad Apr 28 '16 at 11:09
yes, in your loop you should set dinamically (maybe with a counter or ID) the numeric value on `#item_dropdown_list1`, so it will becambe `#item_dropdown_list2`, `#item_dropdown_list3`, etc.. otherwise it will generate multiple select with same ID – pumpkinzzz Apr 28 '16 at 11:18
something like `#item_dropdown_list${as.rule.id}` if you can do it – pumpkinzzz Apr 28 '16 at 11:20
@ pumpkinzzz, Any other solution..?? – Emad Apr 29 '16 at 11:39
@Emad can you replicate your issue on a jsfiddle? Plus, use the **generated HTML**, not the jsp code... you can do it by copying the (relevant) source code from your browser (CTRL+U) – pumpkinzzz Apr 29 '16 at 12:28
@ pumpkinzzz, I can't because the table elements were replicate from database, i don't understand how to replicate. Any other way to overcome my issue..? – Emad May 04 '16 at 11:35
@Emad when the page is rendered on browser, copy the generated HTML code: To do that, right click on your page and select "view source". Then copy and paste it here – pumpkinzzz May 04 '16 at 12:46
@ pumpkinzzz, I copied and paste the generated html in my question, please check it out once, i stuck here from 5days, and don't get any how could i fix this problem. – Emad May 05 '16 at 09:38
@ pumpkinzzz, yes i want to do the same, in my table but its not work on my table. – Emad May 05 '16 at 11:26
@Emad yes, check my new answer – pumpkinzzz May 05 '16 at 12:20
@ pumpkinzzz, First of all thank you so much for your kind help,now its toggle between two td's but problem still is that the drop down is not enable when i select the repeats radio button, actually in repeats radio button i need to send value="repeats", i am shearing the code below – Emad May 05 '16 at 16:48
@ pumpkinzzz, Sorry to ping you again, actually When i click the radio button its work but value is not pass to the controller, what i will do any suggestion please, i shear my code below please check it out once, – Emad May 06 '16 at 05:12
– Emad May 06 '16 at 05:12
@ pumpkinzzz, give me an idea please, – Emad May 09 '16 at 05:38
@Emad the **name** of the 2 radios **must be the same**.. and you put 2 different names: _ruleList[].fixed_ and _ruleList[].repeats_ ... choose one – pumpkinzzz May 09 '16 at 07:39
@ pumpkinzzz, yes there is the problem, i can't take the same name, because after clicking the radio button its pass value, fixed, and when i click repeats its pass repats and frequency value. – Emad May 09 '16 at 07:50
@Emad exactly. You already have the **value** attribute for passing values, but name must be the same: see [Documentation](http://www.w3schools.com/html/html_forms.asp) on how input radio works – pumpkinzzz May 09 '16 at 08:10

pumpkinzzz · Accepted Answer · 2016-05-05T12:31:43.713

You need to do few changes in your code.

First, in a single row the 2 input radio inside Fixed and Repeats columns must have same name attribute. like this:

<td><input type="radio" name="radio_enable_0" value="fixed"></td>
<td><input type="radio" name="radio_enable_0" value="true"></td>

BUT, this name must change for every row in the loop, like this:

<!-- 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>
...

To do this, in the c:forEach loop we need to use an index variable: <input type="radio" name="radio_enable_${as.index}">.

So try with this code for your loop:

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

then in jquery you can do:

$('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);
    }
});

this is the final JSFIDDLE

How to use(repeats) radio button in a table td which is repeate in every row

2 Answers2