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

Question

我尝试根据另一个单选按钮启用和禁用单选按钮。当用户单击特定日期的单选按钮时，该日期的时隙将被启用。例如，当用户单击日期16-03-2019时，应启用16-03-2019 8:30 am和1:30 pm的时隙。 2019年3月17日的其他时间单选按钮将被禁用。

代码如下：

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

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>