This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 2 years, 1 month ago.

Button States not setting property "checked"


  • maarbole
    Participant

    Posts: 8
    Member Reply #7591

    This may be intended, but the “button states” buttons do not check the underlying control. All they do is set an “active” class on the label. This is fine for presentation,  but if these buttons are linked to checkboxes or radios shouldn’t they correctly set the “checked” property?

    Likewise problematically setting the underlying checkbox or radio to “checked” should also alter it’s presentation state.

    I can program all this into my own javascript, but I really feel as though this should be “out-of-box” behavior. As it stands now the buttons by themselves are fairly useless in the sense that they do not actually set form controls, and changing form controls dynamically does not update the presentation.

    If I have missed some code within the javascript files please point me in the right direction, however I noticed that this is the same behavior on the example site: http://keenthemes.com/preview/metronic/theme/admin_3_material_design/ui_buttons.html.

    Thanks.

    • This topic was modified 2 years, 1 month ago by  maarbole.

    maarbole
    Participant

    Posts: 8
    Member Reply #7594

    Apparently, this is a bootstrap JavaScript feature and not necessarily a Metronic issue. I have observed the exact same behavior at http://getbootstrap.com/javascript/#buttons. I really can’t fathom why these button groups wouldn’t be programmed to be tied directly to the underlying controls. When a form is submitted it isn’t going to send “active” classes. I can (sort of) understand not changing the presentation by simply setting the checked value, but it doesn’t make any sense to not update the “checked” property when a true click event is fired.

    You guys may still be interested in adding this functionality to your theme, but in the mean time I will just program it in myself.

     


    maarbole
    Participant

    Posts: 8
    Member Reply #7607

    Well, I’m back again to say that my ignorance is to blame here. Apparently, clicking the buttons does change the property, but changing the property isn’t reflected in the dom (at least not while inspecting it in the developer console). By simply running $('#myinput').prop("checked"), I was able to see that the property was in fact being set appropriately.

    The only issue would be setting the active state of the button appropriately, however this is easily solved by triggering a click event as opposed to setting the prop directly.

    For anyone else who may be searching about this, I basically fixed my problems by doing this:

    $('#myinput').trigger("click")

    instead of this:

    $('#myinput').prop("checked", true)

     

     

    • This reply was modified 2 years, 1 month ago by  maarbole.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #7620

    Hi :),

    Sorry for the reply. Appreciate for sharing your experiences in details. I hope that will be useful for the community.

    Thanks.

Tagged: 

You must be logged in to reply to this topic.