How to disable mobile button (suggestion)

4 posts, 0 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 14 Sep 2012 Link to this post

    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]{
    .km-ios .km-button[disabled]:active{
        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);

    <button type="button" data-role="button" disabled="disabled">My button</button>
  2. John
    John avatar
    12 posts
    Member since:
    Nov 2012

    Posted 28 Nov 2012 Link to this post

    Try changing the pointer event.

    pointer-events: none;
  3. David T.
    David T. avatar
    4 posts
    Member since:
    Aug 2007

    Posted 25 Jan 2013 Link to this post

    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;");
                    cmd.attr("onclick", "");

    Both alerts fire as you would expect, but the button is unchanged.
  4. Lumir
    Lumir avatar
    3 posts
    Member since:
    Aug 2013

    Posted 21 Aug 2013 Link to this post

    Apply k-disabled style, eg:

    pointer-events: none !important;
    opacity:0.5 !important;
Back to Top