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无线电输入值的拼写错误。这是一个错字，但在原始代码中没问题）

注意事项：我在使用.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>

Answer 2

我无法解决问题，因为我相信我遇到了Bootstrap中的错误。

我将项目切换为选择对象，它在功能上按预期工作，只是看起来不像最初所期望的那样好。

感谢输入

Bootstrap无线电输入＆amp;按钮组不更改DOM

2 个答案: