Creating the appearance of a disabled button using a custom button tag: A step-by-step

Question

Creating the appearance of a disabled button using a custom button tag: A step-by-step

Link to JSBin code snippet: http://jsbin.com/axevid/2 <- best viewed in Webkit browser (Chrome or Safari)

I encountered an issue where regular buttons disable all events when disabled. To address this, I created a custom tag as part of my project requirements for a unique button. How can I ensure that bound events are also disabled when the button is disabled and reactivated when it's enabled?

Using Javascript MVC, I vaguely remember seeing a function that disables events, but I can't recall its exact location.

EDIT: The code should function like a plug-in, capable of working with all custom buttons without requiring individual if statements for each event binding. Any suggestions on how to achieve this? Thank you.

javascript jquery html css javascriptmvc

Answer 1

Answer №1

When setting up the control, be sure to include event listeners for the specific events you wish to block (such as "click" and "keypress"). Then, within these event handlers, utilize the event.stopImmediatePropagation() method to prevent other entities from detecting the event.

Here is an example scenario:

btn.addEventListener("click", function(event) {
    if (btn.disabled) {
        event.stopImmediatePropagation();
    }
});

Answer 2

When setting up the control, be sure to include event listeners for the specific events you wish to block (such as "click" and "keypress"). Then, within these event handlers, utilize the event.stopImmediatePropagation() method to prevent other entities from detecting the event.

Here is an example scenario:

btn.addEventListener("click", function(event) {
    if (btn.disabled) {
        event.stopImmediatePropagation();
    }
});

Answer 3

Answer №2

Check out this link for a solution: http://example.com/solution

I've made some updates to the code snippet below:

$(document).on('click', 'customButton', function(e){
  if($(this).hasClass('disabled')){
    e.preventDefault();
    return;
  }
  alert("Updated custom button");

});

Answer 4

Check out this link for a solution: http://example.com/solution

I've made some updates to the code snippet below:

$(document).on('click', 'customButton', function(e){
  if($(this).hasClass('disabled')){
    e.preventDefault();
    return;
  }
  alert("Updated custom button");

});

Answer 5

Answer №3

Are you referring to (based on my interpretation of your question)

$(function() {
$("abutton").each(function() {
if($(this).attr("disabled")) {
e.preventDefault();
return;
});
});

Answer 6

Are you referring to (based on my interpretation of your question)

$(function() {
$("abutton").each(function() {
if($(this).attr("disabled")) {
e.preventDefault();
return;
});
});

Creating the appearance of a disabled button using a custom button tag: A step-by-step

Answer №1

Answer №2

Answer №3

Similar questions

Transforming Django models into JSON format to be utilized as a JavaScript object

Top method for achieving a smooth transition in a loading CSS3 animation

The angular.json file contains a script and a styles property

Encountered an error with a JSON object in node and express: Unexpected colon token

Expanding and collapsing a single item in a ListView with React Native

What is a more efficient method for obtaining the current URL in isomorphic React applications that works on both the client and server side?

JQuery will only run after the Alert has been triggered in Firefox

Why isn't my jQuery click event triggering?

Unable to retrieve attributes of object in JavaScript

Building a Multiple Choice Text Box with HTML

Determine the dropdown list value by analyzing the final two variables in a textfield

What causes the discrepancy in animations between these two divs?

Tips for resizing the width automatically within a container?

Evaluating manually bootstrapped AngularJS applications

Bootstrap slider aligned to the right side

Can you explain the significance of this async JavaScript server application error?

Issue with HTML 5 offline storage cache manifest on mobile devices

The system encountered an error while trying to access the file "/box/main.c" because it does not exist in the directory

Setting custom domains on Heroku is essential for optimizing the performance and branding of my website

The div element is just a tad smaller in size (0.085 smaller as per the CSS calculation)