Input type="checkbox" with buttons.buttons.text not working

Input type="checkbox" with buttons.buttons.text not working

______ Posts: 2Questions: 1Answers: 0

Link to test case:
Debugger code (
Error messages shown: None
Description of problem: I am trying to create a custom button with a checkbox. However, clicking the checkbox in a custom button doesn't seem to change the checked state of the checkbox. Even after using jquery to handle click events, it seems like the click event for the checkbox is being eaten somewhere. In the test case, you can see that clicking anywhere on the button will activate the checkbox, but clicking the actual checkbox itself will not do anything. You may try removing the custom click handler or try writing your own, but I have not found a way to change the state of the checkbox by DIRECTLY clicking on the checkbox. A workaround would be to write a custom element and inserting it using the dom option, however, I would like to try to use the buttons extension for easier extensibility.

Thank you!

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 11,025Questions: 25Answers: 2,524
    edited November 21 Answer ✓

    Interesting issue. I would start by using the buttons.buttons.action function instead of the click event you used. See this example:

    In the buttons.buttons.action function I found that the button text needed to be updated. I update the text and add checked if the checkbox is checked. My guess is buttons will update the button status when the function is complete and part of the is the button text. Maybe @allan or @colin can tell us more about this.

    I also copied the HTML that buttons built for your button and placed it separately in the page. The checkbox updates appropriately without doing anything.

    Use the buttons.buttons.action function to execute any code needed to replace the checkbox click event.


  • ______ Posts: 2Questions: 1Answers: 0
    edited November 23

    Hi Kevin - thanks for the working and helpful response!

    However, the solution does has some consequences, like when using a dropdown button with extend: 'collection'. See this example:

    Even with autoClose set to false, clicking the checkbox seems to close the dropdown. Any workaround for this?

    EDIT: Actually, adding e.stopPropagation seemed to fix it!

Sign In or Register to comment.