基于Ajax返回数据，用jQuery禁用Bootstrap单选时间按钮的方法

我来帮你一步步实现这个功能，同时给你讲清楚jQuery怎么修改按钮的禁用状态~

核心思路 #

当Ajax请求成功拿到已被占用的时间数组后，我们需要：

1. 先重置所有时间按钮的状态（避免上一次选择的日期影响当前结果）
2. 遍历返回的时间数组，匹配对应的单选按钮，同时禁用按钮本身和它的Bootstrap标签容器（保证样式和交互都生效）

修改后的完整Ajax代码 #

const $datepicker = $('#date').datepicker({ format: 'yyyy-mm-dd' });
$datepicker.on('changeDate', function(e) {
  $.ajax({
    type: "POST",
    url: '/process_date',
    data: { date: convert(e.date.toString()) },
    success: function(result) {
      console.log(result);
      
      // 1. 重置所有时间按钮：恢复可用状态
      $('label.btn input[type="radio"][name="timebtn"]').each(function() {
        const $radio = $(this);
        const $label = $radio.closest('label.btn');
        $radio.prop('disabled', false);
        $label.removeClass('disabled').removeAttr('disabled');
      });

      // 2. 遍历返回的已占用时间数组，禁用对应按钮
      result.forEach(timeStr => {
        // 找到value匹配当前时间的radio按钮
        const $radio = $(`input[type="radio"][name="timebtn"][value="${timeStr}"]`);
        if ($radio.length > 0) {
          const $label = $radio.closest('label.btn');
          // 禁用radio输入框（表单不会提交该选项）
          $radio.prop('disabled', true);
          // 给Bootstrap按钮标签添加禁用样式和属性（阻止点击+变灰）
          $label.addClass('disabled').attr('disabled', true);
        }
      });
    },
    error: function (error) {
      console.log(error);
    }
  });

  function convert(str) {
    var date = new Date(str),
        month = ("0" + (date.getMonth()+1)).slice(-2),
        day = ("0" + date.getDate()).slice(-2);
    return [ date.getFullYear(), month, day ].join("-");
  }
});

关键细节说明 #

1. 重置按钮状态：

   • 用closest('label.btn')精准找到radio对应的Bootstrap按钮容器
   • 用prop('disabled', false)恢复radio的可用状态
   • 移除label的disabled类和属性，让按钮样式回到正常状态

2. 禁用指定按钮：

   • 通过属性选择器[value="${timeStr}"]匹配对应时间的radio
   • 给radio设置disabled: true，确保表单提交时不会包含这个禁用选项
   • 给label添加Bootstrap的disabled类，让按钮呈现灰色禁用样式，同时阻止点击交互

单独修改单个按钮禁用状态的方法 #

如果你需要手动控制某个时间按钮的状态（比如测试用），可以用下面的代码：

// 禁用id为8的时间按钮
const $targetRadio = $('#8');
const $targetLabel = $targetRadio.closest('label.btn');
$targetRadio.prop('disabled', true);
$targetLabel.addClass('disabled').attr('disabled', true);

// 恢复id为8的时间按钮
$targetRadio.prop('disabled', false);
$targetLabel.removeClass('disabled').removeAttr('disabled');

注意事项 #

• 确保你的返回result是纯时间字符串的数组（比如["11:30AM", "12:00AM"]），和radio的value属性完全匹配
• 如果时间格式有大小写差异（比如返回的是11:30am但radio value是11:30AM），记得在匹配前统一格式（比如都转成大写）

内容的提问来源于stack exchange，提问作者Hashan