weixin_39600291
2021-01-12 14:56 阅读 0

Separate original checkbox 'change' from internal change logic

Not sure if I'm missing something here, but it seems to me that when changing the state (clicking) of a switch the checked property of the underlying input element's checked property remains unchanged.

Having the checked property reflect the state of the switch seems like an essential feature to me since I would assume that most developers would prefer not to have to change the way they treat their checkbox input elements when applying this plugin.

I'd be more than happy to make a PR for this if we can reach a consensus.

该提问来源于开源项目:Bttstrp/bootstrap-switch

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

16条回答 默认 最新

  • weixin_39760967 weixin_39760967 2021-01-12 14:56

    :+1: !!

    点赞 评论 复制链接分享
  • weixin_39787792 weixin_39787792 2021-01-12 14:56

    the issue does not occur. you retrieve correct value using .prop("checked") as you should.

    screen shot 2015-01-06 at 09 43 42

    does it clarify your doubts?

    点赞 评论 复制链接分享
  • weixin_39683526 weixin_39683526 2021-01-12 14:56

    What I mean myself the change property of the DOM element does not fire. I do not want to change my code to listen to the plugin, why would everyone to change the firing of the checkbox to code like this:

    
    $(id or class).bootstrapSwitch().on('switchChange.bootstrapSwitch', ....
    

    why not fire the default checkbox 'change' event.

    I tried code like this:

    
        $(".switch").bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
            $(this).trigger("change");
        })
    

    but even does not fire.

    点赞 评论 复制链接分享
  • weixin_39633437 weixin_39633437 2021-01-12 14:56

    I have the same issue. This is my initialization code:

     javascript
    var $checkbox = $('[type="checkbox"]');
    $checkbox.bootstrapSwitch({
        onColor: 'success',
        onSwitchChange: function(value) {
            console.log($(value.currentTarget).prop('checked'));
         }
     });
     $checkbox.on('change', function() {
         console.log($(this).is(':checked'));
         console.log($(this).prop('checked'));
     });
    

    In the onSwitchChange() function state of checkbox is correct. But original change event of checkbox is not triggering.

    UPD: original change will be triggered if: 1. Trigger change event in onSwitchChange(). 2. Change event listener for checkbox was specified before plugin initialization.

    点赞 评论 复制链接分享
  • weixin_39683526 weixin_39683526 2021-01-12 14:56

    This missing important feature forced me to switch to another nice plugin also:

    http://www.bootstraptoggle.com/

    点赞 评论 复制链接分享
  • weixin_39760967 weixin_39760967 2021-01-12 14:56

    Hmm.. Well bootstrap toggle does NOT seem to work on an iPhone though (e.g. iOS Safari).

    点赞 评论 复制链接分享
  • weixin_39683526 weixin_39683526 2021-01-12 14:56

    Too bad either, I have not tested on iPhone. I liked it because it occupy small area almost half of all others with the same functionality. I reported the issue https://github.com/minhur/bootstrap-toggle/issues/22.

    点赞 评论 复制链接分享
  • weixin_39760967 weixin_39760967 2021-01-12 14:56

    Do you have time to built in this feature? :smile: It is indeed invaluable!

    This switch control looks pretty nice, and I myself for example want to use this switch control in Knockout using the checked binding that is available for HTML checkboxes. If this plugin does not reflect changes back to the original checkbox element this is not possible. (For now I have written some glue code, but I'd prefer to be able to follow standard conventions).

    点赞 评论 复制链接分享
  • weixin_39713805 weixin_39713805 2021-01-12 14:56

    :+1: Not sure why the state of the switch wouldn't be aligned with the underlying checkbox element. Also, triggering the change event on the element is a must. I would think these features would be the foundation of such a plugin. Weird.

    image

    点赞 评论 复制链接分享
  • weixin_39787792 weixin_39787792 2021-01-12 14:56

    the switchChange custom event is independent by the checkbox change, which is not triggered since it is used as event receiver. this paradigm is based on code of version <= 3, therefore must be updated.

    the checkbox change event has not to be called internally. instead, it has to be listened internally for incoming changes and fired when a state change occurs. the update is quite broad and affects many parts of the plugin.

    点赞 评论 复制链接分享
  • weixin_39633437 weixin_39633437 2021-01-12 14:56

    , sorry, but your explanation a little confused me. Your plugin is wrapped default checkbox, but not used default change event, so developer's code should implement change event listening.

    点赞 评论 复制链接分享
  • weixin_39787792 weixin_39787792 2021-01-12 14:56

    -jones apologise for the confusing explanation. what i meant is exactly what you said. the checkbox change event has not to be used internally like now.

    点赞 评论 复制链接分享
  • weixin_39600291 weixin_39600291 2021-01-12 14:56

    In the process of getting back into this issue, I've realised that the behaviour that initiated the creation of this seems to be related more to the standard Checkbox HTML element than anything else.

    With the latest version (3.3.2) I can get the appropriate value of the checkbox using all of the following commands:

    
    $('input[name=active]').is(':checked')
    $('input[name=active]').prop('checked')
    $('input[name=active]')[0].checked
    

    I even get the appropriate value when using the $.serializeArray method (even though unchecked returns no value, which is expected) (see jquery.serializeJSON plugin for better collection of form data).

    It seems to be however that what initially cause my to raise this issue is that neither the Firefox or Chrome HTML inspectors remove or add the checked property when a checkbox is toggled. This led me to believe that the input element in the DOM was not being altered.

    In terms of the change event it seems to me that the event is only triggered when the element is actually clicked. When changing the value using code I think the only way for it to be triggered would be manually. I'll submit a very simple pull request to this effect.

    点赞 评论 复制链接分享
  • weixin_39631007 weixin_39631007 2021-01-12 14:56

    thanks for the PR. A week ago I added the feature that allows users to prevent the change of a switch once it is clicked. Can you check that this code works? Can you test this feature?

    点赞 评论 复制链接分享
  • weixin_39600291 weixin_39600291 2021-01-12 14:56

    Sure thing !

    Returning false on a function set using the onSwitchChange option prevents the switch from changing as intended.

    The standard change event is still not triggered when the switch is changed. Not sure how the feature relates to this issue.

    点赞 评论 复制链接分享
  • weixin_39600291 weixin_39600291 2021-01-12 14:56

    Closing this issue as I'm no longer using this library and the attached PR has been awaiting feedback for too long.

    点赞 评论 复制链接分享

相关推荐