rails 4 : change state issue with Bootstrap Switch - ruby-on-rails-4

Question

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"> </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>

Answer 1

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...