javascript - Bootstrap 单选输入和按钮组不改变 DOM

Question

我正在使用 Bootstrap 将单选选择器设置为按钮。用户的显示很好，但是当按下按钮时，相应的单选对象未设置为在 DOM 中选中。因此，当表单被序列化时，它只会显示默认选中的选择器:

<div class='btn-group btn-group-sm' data-toggle='buttons'>
  <label class='btn btn-default active>
    <input type='radio' name='moveMeal' id='moveBreakfast' value='Breakfast' checked> Breakfast</label>
  <label class='btn btn-default>
    <input type='radio' name='moveMeal' id='moveLunch' value='Lunch'> Lunch</label>                 
  <label class='btn btn-default>
    <input type='radio' name='moveMeal' id='moveDinner' value='Dinner'> Dinner</label>
</div>

当通过 jQuery 对表单的其余部分进行序列化时，它总是:

&moveMeal=Breakfast

无论用户选择什么。

非常感谢任何建议，谢谢

更新: (更正了 moveDinner radio 输入值的错字。这是一个错字，但在原始代码中没问题)

注意事项:我在使用 .load() 请求加载初始页面后加载此表单。完成 load() 请求后，我将初始化 .btn 类:

$('.modal-content').load("movePlanModal.php?id=" + id, function() {
  $('#modal').modal('show');
  $(".container").addClass("blur");
  xsNavSave();
  $(".btn").button();
});

Answer 1

不要忘记在您的标签中添加“for”，这有助于辅助功能，选择标签将选中单选按钮。

<div class='btn-group btn-group-sm' data-toggle='buttons'>
  <label for="moveBreakfast" class='btn btn-default active>
    <input type='radio' name='moveMeal' id='moveBreakfast' value='Breakfast' checked> Breakfast</label>
  <label for="moveLunch" class='btn btn-default>
    <input type='radio' name='moveMeal' id='moveLunch' value='Lunch'> Lunch</label>                 
  <label for="moveDinner" class='btn btn-default>
    <input type='radio' name='moveMeal' id='moveDinner' value='Dinner'> Dinner</label>
</div>