New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Disabled Button

The business logic of an application often requires a certain button to be temporarily disabled or enabled.

You can initially configure the Button as disabled through its .Enable() setting. Additionally, you can enable or disable the Button at any time with JavaScript by using its enable() method with a Boolean argument.

The following example demonstrates how to enable and disable the Button through the enable attribute.

    @(Html.Kendo().Button()
        .Name("disabledButton")
        .Enable(false)
        .Content("Disabled button"))

To disable the Button, you can also use the ViewData or ViewBag attributes. The example below illustrates a disabled Button through the ViewData attribute.

    @(Html.Kendo().Button()
        .Name("disabledButton")
        .Enable((bool)@ViewData["IsEnabled"])
        .Content("Disabled button"))
    public IActionResult Index()
    {
        ViewData["IsEnabled"] = false;
        return View();
    }

At runtime, you can disable the Button at with JavaScript by using its enable() method with a Boolean argument.

@(Html.Kendo().Button()
        .Name("editButton")
        .Content("Edit")
    <kendo-button name="editButton">Edit</kendo-button>
    <script>
        var isAdmin = false;
        var buttonWidget = $("#editButton").data("kendoButton"); // Use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) configuration option to get an instance of the Button TagHelper
        if(!isAdmin) {
            buttonWidget.enable(false); // disable the button
        } else {
            buttonWidget.enable(true);  // enable the button
        }
    </script>

Referencing Existing Instances

To reference an existing Button instance, use the jQuery.data() configuration option. Once a reference is established, use the Button client-side API.

See Also

In this article