How to disable mobile button (suggestion)

[Alex]

In my project I need some buttons to disable. Many posts here  and my support tickets telling that for the moment buttons cannot be disabled. I have a suggestion, because I think it is very simple.

If you make a button like <button>, it has attribute "disabled" and if this attribute is set click does not appear.
Second, for disabled buttons add some styling, and buttons are disabled:

.km-ios .km-button[disabled]{

    color:#ccc;

    cursor:default;

}

.km-ios .km-button[disabled]:active{

    color:#ccc;

    background-color:#7185A2;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

    cursor:default;

}

<button type="button" data-role="button" disabled="disabled">My button</button>


[John]

Try changing the pointer event.

pointer-events: none;

[David T.]

Is there a way, if I have a button that starts out disabled, to enable it?  I tried this and it didn't work:

Note that when the page is loaded, my button initially says this:

disabled="disabled" OnClientClick="return false;"

            var cmd = $("cmdSubmit");
            var txt = $("#txtNote");

            // Enable the submit button if and only if we have data
            if ("" == txt.val())
            {
                cmd.attr("disabled", "disabled");
                cmd.attr("onclick", "return false;");
                alert("disabled");
            }
            else
            {
                cmd.attr("onclick", "");
                cmd.removeAttr("disabled");
                alert("enabled");
            }

Both alerts fire as you would expect, but the button is unchanged.

[Lumir]

Apply k-disabled style, eg:

.k-disabled
{
pointer-events: none !important;
opacity:0.5 !important;
}