rails 4:使用 Bootstrap Switch 更改状态问题 [英] rails 4 : change state issue with Bootstrap Switch

查看：55
本文介绍了rails 4:使用 Bootstrap Switch 更改状态问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 3 个引导程序开关来处理读取/更新/创建权限.它们的区域写为:

<%= f.check_box :allow_read, :data =>{ :size=>'中等','on-color'=>'success', 'on-text'=>"#{t('yes').upcase}",'off-text'=>"#{t('no').upcase}" } %><%= f.check_box :allow_update, :data =>{ :size=>'中等','on-color'=>'success', 'on-text'=>"#{t('yes').upcase}",'off-text'=>"#{t('no').upcase}" } %><%= f.check_box :allow_create, :data =>{ :size=>'中等','on-color'=>'success', 'on-text'=>"#{t('yes').upcase}",'off-text'=>"#{t('no').upcase}" } %>

并显示为:

当用户切换一个开关时，我尝试使用 switchChange.bootstrapSwitch 方法来更改其他 é 开关.

当 :allow_read 关闭时， :allow_update 和 :allow_create 也应该关闭...

所以我写了下面的js代码来处理这种情况......

 $('input[name="permission[allow_read]"]').on('switchChange.bootstrapSwitch', function(event, state) {if (event.type == "switchChange" && state == false){$('input[name="permission[allow_update]"]').bootstrapSwitch('state', false, true);//禁止更新$('input[name="permission[allow_create]"]').bootstrapSwitch('state', false, true);//禁止创建}});

但它不能正常工作......因为它在开关之前插入和关闭文本，但是执行了切换:

可能有什么问题?

感谢反馈

--更新 ---忘记添加生成的 HTML...

<input name="permission[allow_read]" type="hidden" value="0"><div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-medium bootstrap-switch-animate bootstrap-switch-id-permission_allow_read"><div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-success">OUI</span><label class="bootstrap-switch-label">&nbsp;</label><span class="bootstrap-switch-handle-off bootstrap-switch-default">非</span><input type="checkbox" value="1" checked="checked" name="permission[allow_read]" id="permission_allow_read">

解决方案

我猜 Rails 视图助手和 Bootstrap 开关生成的 html 有问题...
回到标准的 html 标签，它可以正常工作

 
<div class="col-sm-12"><div class="form-group"><p class='col-sm-3 control-label' >READ</p><div class="col-sm-9"><input id="allow_read" name="permission[allow_read]" type="checkbox" value="1" data-size='medium', data-on-color='success' data-on-text="是"数据关闭文本=否"/>

以及类似的用于更新和创建的开关....js 脚本运行得很好...

I have 3 bootstrap switches to handle read/update/create permissions. They area written as :

<%= f.check_box :allow_read, :data => { :size=>'medium', 
   'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}", 
    'off-text'=> "#{t('no').upcase}" } %>


<%= f.check_box :allow_update, :data => { :size=>'medium', 
   'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}", 
    'off-text'=> "#{t('no').upcase}" } %>

<%= f.check_box :allow_create, :data => { :size=>'medium', 
   'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}", 
   'off-text'=> "#{t('no').upcase}" } %>

and displayed as :

I am trying to use the switchChange.bootstrapSwitch method to change other é switches when one switch is toggled by the user .

When :allow_read is switch OFF , then :allow_update and :allow_create should be switched OFF too...

So I wrote the following js code to handle this case ...

 $('input[name="permission[allow_read]"]').on('switchChange.bootstrapSwitch', function(event, state) {
      if (event.type == "switchChange" && state == false){
        $('input[name="permission[allow_update]"]').bootstrapSwitch('state', false, true); // disallow update
        $('input[name="permission[allow_create]"]').bootstrapSwitch('state', false, true); // disallow create
      }
    });

But it's not working fine ... as it's inserting and OFF text before the switch, however the toggling is performed :

what could be wrong ?

thanks for feedback

--UPDATE --- forgot to add the generated HTML... 

<div class="col-sm-9">
  <input name="permission[allow_read]" type="hidden" value="0">
  <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-medium bootstrap-switch-animate bootstrap-switch-id-permission_allow_read">
      <div class="bootstrap-switch-container">
          <span class="bootstrap-switch-handle-on bootstrap-switch-success">OUI</span>
          <label class="bootstrap-switch-label">&nbsp;</label>
          <span class="bootstrap-switch-handle-off bootstrap-switch-default">NON</span>
          <input type="checkbox" value="1" checked="checked" name="permission[allow_read]" id="permission_allow_read">
      </div>
  </div>
</div>

解决方案

I guess there is something wrong with html generated by the Rails view helper and Bootstrap switch...
back to a standard html tag , it works correctly 

            <div class="row">
              <div class="col-sm-12">
                <div class="form-group">
                  <p  class='col-sm-3 control-label' >READ</p>
                  <div class="col-sm-9">
                    <input id="allow_read" name="permission[allow_read]" type="checkbox" value="1"  data-size ='medium', data-on-color ='success' data-on-text = "YES" data-off-text = "NO" />
                  </div>
                </div>
              </div>
            </div>

and similar switches for update and create.... the js script runs very well...

这篇关于rails 4:使用 Bootstrap Switch 更改状态问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆