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

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

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

尝试以下方式:

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