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]{
        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>
  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. Kendo UI is VS 2017 Ready
  4. 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;");
                    alert("disabled");
                }
                else
                {
                    cmd.attr("onclick", "");
                    cmd.removeAttr("disabled");
                    alert("enabled");
                }

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

    Posted 21 Aug 2013 Link to this post

    Apply k-disabled style, eg:

    .k-disabled
    {
    pointer-events: none !important;
    opacity:0.5 !important;
    }
Back to Top
Kendo UI is VS 2017 Ready