jQuery UI Widgets Forums Editors CheckBox, RadioButton Change Checkbox Text Dynamically

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 4 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Change Checkbox Text Dynamically #83546

    kjm
    Participant

    I have a set of checkboxes in a jqxWindow.
    Based on certain actions being taken the text value of the checkbox(s) need to change dynamically.
    I thought I could simply use $(‘#chk1’).text(‘This is changed via code’); to change the div’s value but when I do that the text changes and the checkbox disappears.

    I could not find anything on changing the text of a checkbox after initial creation.

    Here is a small sample of my code:

        <form id="form1" runat="server">
            <button id="checks" style="display:block; margin:auto; width:100%;">Show Popup</button>
            <div style="width: 100%; height: 650px; display:none;" id="tpContainer">
                <div id="tpWindow">
                    <div id="tpHeader">
                        <span>Checkboxes</span>
                    </div>
                    <div style="overflow: hidden;" id="tpContent">
                        <div id="chk1">1</div>
                        <div id="chk2">2</div>
                        <br /><hr /><br />
                        <button id="btnTest" style="display:block; margin:auto; width:100%;">Change Check Text</button>
                    </div>
                </div>
            </div>
    
            <script type="text/javascript">
                var checkBoxes = (function () {
                    function createElements() {
                        $('#checks').jqxButton({ width: '180' });
                        $('#btnTest').jqxButton({ width: '180' });
                        $('#chk1').jqxCheckBox({ theme: 'energyblue', height: 17, checked: true });
                        $('#chk2').jqxCheckBox({ theme: 'energyblue', height: 17, checked: true });
                    };
                    function addListeners() {
                        $('#checks').on('click', function () {
                            $('#tpWindow').jqxWindow('open');
                            return false;
                        });
                        $('#btnTest').on('click', function () {
                            $('#chk1').text('This is changed via code');
                            return false;
                        });
                    }
                    function createWindow() {
                        $('#tpWindow').jqxWindow({
                            theme: 'darkblue', showCollapseButton: true, autoOpen: false, resizable: false,
                            maxHeight: ($(window).height() * .95), maxWidth: 700, minHeight: 200, minWidth: 200, height: 100, width: 150,
                            initContent: function () {
                                $('#tpWindow').jqxWindow('focus');
                            }
                        });
                    };
    
                    return {
                        config: { dragArea: null },
                        init: function () {
                            createElements();
                            addListeners();
                            createWindow();
                        }
                    };
                }());
            </script>
            <script type="text/javascript">
                $(document).ready(function () {
                    checkBoxes.init();
                });
            </script>
         </form>
    
    Change Checkbox Text Dynamically #83580

    ivailo
    Participant

    Hi kjm,

    Use the following approach:
    Wrap your text in span element with some id and change the text of this span.

    Here is a demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.