0

I'm trying to create a cron generator using radio buttons and multiple select. The select handles the custom part of the of the job and it has a radio button attached to it. I placed a listener that checks the radio button if the select is click. The problem is clicking another radio button. When I do this it visually seems that it is not checked but looking at the DOM it says that its checked and clicking back the select does not visually checks the radio. Here is an example of what I'm trying to do enter link description here

HTML:

<table class="cron-tbl">                    
    <tbody>                                            
        <tr>
            <td colspan="2" class="table-header">Weekdays</td>                                                      
         </tr>                                             
         <tr>                                                
            <td class="left-txt">
                <label><input type="radio" name="cron-weekdays" value="*">Every Minute</label><br>
                <label><input type="radio" name="cron-weekdays" value="*/2">Even Minutes</label><br>   
                <label><input type="radio" name="cron-weekdays" value="1-59/2">Odd Minutes</label><br>
                <label><input type="radio" name="cron-weekdays" value="/5">Every 5 Minutes</label><br>
                <label><input type="radio" name="cron-weekdays" value="/15">Every 15 Minutes</label><br>  
                <label><input type="radio" name="cron-weekdays" value="/30">Every 30 Minutes</label>                                                  
            </td>
            <td>                                                
                <table class="multi-select">
                    <tbody>
                        <tr>
                           <td colspan="2">  
                                <input type="radio" name="cron-weekdays" value="select">
                                <select size="8" name="selectWeekdays" multiple="">
                                    <option value="0">Sun</option>
                                    <option value="1">Mon</option>
                                    <option value="2">Tue</option>
                                    <option value="3">Wed</option>
                                    <option value="4">Thu</option>
                                    <option value="5">Fri</option>
                                    <option value="6">Sat</option>
                                 </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>         
        </tr>
    </tbody> 
</table>

JQuery:

$('select[multiple]').on('click', function(event) {
    $(this).siblings('input[type=radio]').attr('checked', true);
});
LouieV
  • 1,032
  • 2
  • 15
  • 28

1 Answers1

0

Use .prop() instead of .attr()

$(this).siblings('input[type=radio]').prop('checked', true);

DEMO, You also visit .prop() vs .attr() for detailed difference between these

Community
  • 1
  • 1
Satpal
  • 132,252
  • 13
  • 159
  • 168