JSFiddle - React, Tailwind, and code Playground

by Yves Le Borgne

HTML

<body>
    <div data-role="content"> <a href="#" id="btn_soap1" class="ui-input-btn ui-btn ui-mini ui-btn-inline ui-icon-back " onclick="getInitialNotifications();">Soap1</a>

        <button id="btn_soap" class="ui-btn ui-btn-inline ui-mini ui-icon-bullets " onclick="getInitialNotifications();">Soap</button>
        <script>
            
        </script>
    </div>
</body>

JavaScript

$(document).on("ready", function () {
    $("#btn_soap1").button({ // breaks rendering !
        disabled: false      // remove it, rendering ok, but disable
    });                      // dont work


    $("#btn_soap").on("click", function () {

        // bubbled from the onClick thingie in the markup

        var isDis = $("#btn_soap1").button("option", "disabled");
        $("#btn_soap1").button("option", "disabled", !isDis);
        if (isDis === undefined || !isDis) {

            $("#btn_soap1").button("disable");

        } else {
            $("#btn_soap1").button("enable");

        }


        //                var but = $("#btn_soap1");
        //                var className = "ui-state-disabled";
        //                if(but.hasClass(className)) {
        //                    but.removeClass(className);
        //                } else {
        //                    but.addClass(className);
        //                }
        //                    if ($("#btn_soap1").data('mobile-button') === undefined) {
        //                        $("#btn_soap1").button({            // required initialization
        //                            disabled: false
        //                        });
        //                    } else {
        //                        $("#btn_soap1").button("disable");
        //                    }

    });
});

function getInitialNotifications() {
// just a stub 
};