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

Question

我正在尝试根据另一个单选按钮启用和禁用单选按钮。 当用户单击该日期的特定日期单选按钮时间段时将被启用。 例如，当用户点击日期为 16-03-2019 的时间段为 16-03-2019 上午 8:30 和下午 1:30 时，应启用。 17-03-2019 的其他时间单选按钮被禁用。

这是代码：

<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

您可以首先将所有单选按钮设置为disabled ，然后仅从最近的tr的单选按钮中删除disabled属性。

尝试以下方式：

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

您必须在<tr>标签中添加行计数器：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>

查询：

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