从单选按钮中选择特定日期时启用禁用设置单选按钮

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>