为什么输入类型radio不点击就不起作用？

Question

我正在使用 Bootstrap，并且我有一个奇怪的单选按钮组。这是标记：

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_enabled" value="1"> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_enabled" value="0"> Disabled
  </label>
</div>

如您所见，“启用”按钮在页面加载时启用。如果我不点击“启用”按钮并且我提交表单变量feature_enabled 不存在，但如果我这样做了，它就是。我正在使用 jQuery 的 serialize() 函数来收集表单数据。但是，当我单击单选输入时，我可以看到（在开发人员工具栏中）没有“选中”或“选定”属性添加到该 HTML 节点。 此外，如果我输入 $('input[type=radio]:checked').val() 我得到了 undefined 但在我点击那个按钮后我得到了值。

为什么会这样？

更新
我更新了单选按钮的名称，因为正如您所说，它们应该具有相同的名称。在我的工作区他们有。当我更改 html 标记来创建这个问题时，这个“错误”就出现了。

更新 2
好的，我知道我可以将“选中”属性添加到我的单选按钮，并且还知道只有“活动”类使输入看起来像是被按下了。但！检查引导站点关于输入here 或here！使用 F12 打开开发人员工具栏，然后查看当您单击任一单选输入时，HTML 源代码中没有添加“选中”属性。
当我在保存之前单击它并且输入节点没有获得“已检查”属性时，我的站点会保存 featue_enabled 的值。我能观察到的唯一变化是“活动”类进入单击的节点并离开另一个。 （同样，发布此表单在没有“已检查”属性的情况下工作！）
我认为这是一个有趣的案例，很高兴知道为什么会发生这种情况！

Answer 1

试试这个

$('input[type=radio]').attr('checked','true');

Answer 2

标签上有active 类并不意味着您已启用它。需要选择输入（checked 在单选按钮的情况下，因为它是一种复选框）

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature" value="1" checked="checked"> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature" value="0"> Disabled
  </label>
</div>

只是为了明确回应其他答案和 cmets 中所述的内容，您可以通过以下方式在 jQuery 中设置检查值：

$('input[type=radio]').prop('checked','true');

注意属性 (.prop) 和属性 (.attr) 之间的区别，如 jQuery documentation 中所述

更新： 正如 TrueBlueAussie 所发现的，您的单选按钮返回一个值，并且都应该具有相同的名称。但是，按钮 ID 可能不同，这对于在上面的 jQuery 语句中准确说明您希望检查哪个单选按钮很有用

Answer 3

如果你想通过javascript添加它

$('#enabledRadioButtonId').prop('checked','true');

和 enabledRadioButtonId 作为要启用的单选按钮的 id。

或者只是将“已选中”添加到您希望对其进行检查的单选按钮

<input type="radio" class="form-control" name="feature_enabled" value="1" checked>

Answer 4

因为实际上它没有被检查，它看起来只是由 css 使用 class active 进行检查。你应该添加属性checked。
单选按钮的名称也应该是相同的值，如name="feature_check"
试试这个

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_check" value="1" checked> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_check" value="0"> Disabled
  </label>
</div>

Answer 5

试试这个Demo

添加选中的活动无线电输入

<div class="btn-group custom-btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" class="form-control" name="feature_enabled" value="1" **checked**> Enabled
  </label>
  <label class="btn btn-default">
    <input type="radio" class="form-control" name="feature_disabled" value="0"> Disabled
  </label>
</div>