Enable disable set radio button when particular date is selected from radio button

Question

I am trying to enable and disable radio button depending on another radio button. When user clicks on particular date radio button time slot of that date as to be enabled. For eg When the user clicks of date 16-03-2019 time slot of 16-03-2019 8:30am and 1:30pm should be enabled. Other time radio button of 17-03-2019 as to be disabled.

Here is the code:

<tr><td><input class="slot" type="radio" name="date" required="" value="16-03-2019">16-03-2019</td>
<td><input class="disabled" type="radio" name="time" value="8:30 am">8:30am</td>
<td><input class="disabled" type="radio" name="time" value="1:30 am">1:30pm</td>


</tr> 
 <tr><td><input type="radio" class="slot" name="date" required="" value="17-03-2019">17-03-2019</td>
<td><input class="disabled" type="radio" name="time" value="8:30 am">8:30am</td>



</tr> 
<script type="text/javascript">
    $(document).ready(function() {
        $('.slot').click(function() {
            $('.disabled').prop('checked', false);
            $('.disabled').attr('disabled',true);
            var id = $(this).attr('id');
            id = id.split('_');
            id = id[1];
            $('#time_1_'+id).attr('disabled',false);
            $('#time_2_'+id).attr('disabled',false);
        });
    });
</script>

Answer 1

You can first set all the radio buttons to disabled , then remove the disabled property only from the closest tr 's radio buttons.

Try the following way:

 $(document).ready(function() { $('.disabled').attr('disabled', 'disabled'); $('.slot').click(function() { $('.disabled').attr('disabled', 'disabled'); $(this).closest('tr').find('.disabled').each(function(i, r){ $(r).removeAttr('disabled'); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input class="slot" type="radio" name="date" required="" value="16-03-2019">16-03-2019</td> <td><input class="disabled" type="radio" name="time" value="8:30 am">8:30am</td> <td><input class="disabled" type="radio" name="time" value="1:30 am">1:30pm</td> </tr> <tr> <td><input type="radio" class="slot" name="date" required="" value="17-03-2019">17-03-2019</td> <td><input class="disabled" type="radio" name="time" value="8:30 am">8:30am</td> </tr> </table>

Answer 2

You have to add row counter in <tr> tag : HTML :

<tr data-row="1">
    <td><input class="slot" type="radio" name="date1" required="" value="16-03-2019">16-03-2019</td>
    <td><input class="disabled" type="radio" name="time1" value="8:30 am">8:30am</td>
    <td><input class="disabled" type="radio" name="time1" value="1:30 am">1:30pm</td>
</tr> 
<tr data-row="2">
    <td><input type="radio" class="slot" name="date2" required="" value="17-03-2019">17-03-2019</td>
    <td><input class="disabled" type="radio" name="time2" value="8:30 am">8:30am</td>
    <td><input class="disabled" type="radio" name="time2" value="1:30 am">1:30pm</td>
</tr>

JQuery :

<script type="text/javascript">
$(document).ready(function()
{
    $('.slot').click(function()
    {
        var tr_row = $(this).parents('tr').attr('data-row');
        alert(tr_row);
        //Disable all radio
        $('input[name^=time]').removeClass('enable');
        $('input[name^=time]').addClass('disabled');
        //Enable specific radio row
        $('input[name=time'+tr_row+']').removeClass('disabled');
        $('input[name=time'+tr_row+']').addClass('enable');
    });
});
</script>