# Disable Trigger Buttons

![Disabling a Submission Button](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MfYg70yWa2hqBPzn4S7%2F-MfYgXSCEegYN1QVnfyO%2Fimage.png?alt=media\&token=9e4cb5ee-5d64-4f71-a6e8-a1fc06b458fc)

### The JS

This allows us to disable the knack action link that makes these Knack trigger buttons clickable

```
/****************************************************/
/*** Disable Trigger buttons from being Clickable ***/
/****************************************************/
$(document).on('knack-scene-render.any', function(event, view) {
  var $disabledTriggerButton = $(".trigger-button-large-disabled").parent();
  $disabledTriggerButton.removeClass("kn-action-link");
})
```

### The CSS

We create another trigger-button class here to give our disabled trigger buttons a different look from active trigger buttons. Notably, we set the border color and outline color to transparent so when a disabled button is selected, it does not bring attention to itself or shift content on the page by those few pixels. Additionally, we set the button to a lighter gray color and give it some opacity.

```
.trigger-button-disabled {
  border-color: transparent;
  border-radius: 4px;
  background-color: #cbcbcb;
  color: #777777;
  padding: 10px 10px;
  font-size: 18px;
  text-align: center;
  opacity: 0.6;
  display: inline-block;
  outline-color: transparent;
}
```

For all the disabled buttons in the application, we will utilize this disabled button effect to change the cursor.

```
.disabled { cursor: not-allowed; }
```

### How to Implement

{% tabs %}
{% tab title="1️⃣" %}
Create two separate Details views on a page, one for the Enabled button and the other for the Disabled button.

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MWyZNK5w0HCTfeJUota%2F-MWyiAUcaHHksb_OGlhF%2Fimage.png?alt=media\&token=0d668ed3-10fe-4417-95a3-ec36ddf319b4)
{% endtab %}

{% tab title="2️⃣" %}
Select Trigger an action and select the pencil to edit the field on the right

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MWyZNK5w0HCTfeJUota%2F-MWyiLM0eK_MjjMZE5fk%2Fimage.png?alt=media\&token=d4769abc-6be2-444a-9528-dd8237c23eed)
{% endtab %}

{% tab title="3️⃣" %}
At the top, there is a Link Text field where you will put the HTML to call the CSS Button class

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MfYVWHxeFcVLHeZVwYp%2F-MfYX7zxv9bcI2ML8vo5%2Fimage.png?alt=media\&token=a7bc92a1-a0df-4e8c-95d5-deb51e429cdd)
{% endtab %}

{% tab title="4️⃣" %}
We will customize this HTML with any FA icons, images, or text that we want to appear on the Trigger button. We call both of the CSS classes mentioned above.

```
<button class="trigger-button-disabled disabled"><i class="fa fa-plus-circle"></i><strong> New Submission</strong></button>
```

For our other view, we simply do the same thing but use our regular enabled button classes. So that this view will only show the disabled button while the other will only show the enabled button. It is important they are separated for our last step.
{% endtab %}

{% tab title="5️⃣" %}
Lastly, we set page rules based on the specific criteria set by your app. In our current example, we use a Sum field for instance to see if any of our Submissions are set to 1 instead of 0 (Binary Boolean) by its Status.&#x20;

In this scenario we hide the Enabled button view if our Sum field is 1 or more so that only our Disabled button view will show.

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MWyZNK5w0HCTfeJUota%2F-MWymXAqoW-A73p4fhPA%2Fimage.png?alt=media\&token=bf28100e-32d8-4963-9467-bb92562859ef)
{% endtab %}
{% endtabs %}