Change Checkbox Text Dynamically

[kjmParticipant]

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>

[ivailoParticipant]

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

[Author]

Posts