Bootstrap Switch显示两个带Rails和Simple Form的开关

时间:2017-06-13 19:33:13

标签: javascript jquery html ruby-on-rails bootstrap-switch

我正在使用Ruby on Rails和Simple Form Gem的Bootstrap Switch Gem。 根据Bootstrap Switch指令,我按如下方式初始化了交换机:

$(document).ready(function() {
  $("[input='radio']").bootstrapSwitch();
});

但是,单选按钮显示为两个开关且无法正常工作:

enter image description here

然而,他们应该显示如下:

enter image description here

这会导致什么?我正在使用它作为一个复选框,所有工作都按预期工作。

单选按钮的HTML输出:

<span class="radio">
  <label for="client_high_profile_true">
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-inverse bootstrap-switch-id-client_high_profile_true bootstrap-switch-on bootstrap-switch-animate" style="width: 106px;">
      <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;"><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">NO</span>
        <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span><span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 52px;">YES</span>
     <input class="radio_buttons optional" type="radio" value="true" name="client[high_profile]" id="client_high_profile_true">
   </div>
   </div>Yes
 </label>
</span>

<span class="radio">
  <label for="client_high_profile_false">
   <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-readonly bootstrap-switch-inverse bootstrap-switch-id-client_high_profile_false bootstrap-switch-animate bootstrap-switch-off" style="width: 106px;">
      <div class="bootstrap-switch-container" style="width: 156px; margin-left: 0px;"><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">NO</span><span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 52px;">YES</span>
     <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" checked="checked" name="client[high_profile]" id="client_high_profile_false">
  </div>
  </div>No</label>
  </span>

感谢任何帮助。

0 个答案:

没有答案