Disable Trigger Buttons

How to disable trigger buttons

Disabling a Submission Button

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

1️⃣

Create two separate Details views on a page, one for the Enabled button and the other for the Disabled button.

2️⃣

3️⃣

4️⃣

5️⃣