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 8 years, 1 month ago.

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


    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">
                    <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>
            <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 () {
                            return false;
                        $('#btnTest').on('click', function () {
                            $('#chk1').text('This is changed via code');
                            return false;
                    function createWindow() {
                            theme: 'darkblue', showCollapseButton: true, autoOpen: false, resizable: false,
                            maxHeight: ($(window).height() * .95), maxWidth: 700, minHeight: 200, minWidth: 200, height: 100, width: 150,
                            initContent: function () {
                    return {
                        config: { dragArea: null },
                        init: function () {
            <script type="text/javascript">
                $(document).ready(function () {
    Change Checkbox Text Dynamically #83580


    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

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

You must be logged in to reply to this topic.