Once a button has been clicked, it is not possible to disable another button

Two buttons labeled Accept and Deny are present, each revealing a different div with an additional button.

Upon clicking the Accept button, it should disable the Deny button, slide in the Accept form, and allow the user to click on the Send Accept button.

  • Click on Accept
  • Click on Send Accept
  • The Deny button should become inactive

I have tried removing the 'option' class from the Deny button after clicking Send Accept, but the button remains active. The issue persists even though the class has been removed :(

Link to my codepen: http://codepen.io/leongaban/pen/hKDIJ

HTML

<div id="accept" class="option btn_accept">
  Accept
</div>

<div id="deny" class="option btn_deny">
  Deny
</div>

<div id="accept_msg">
<form id="accept_form">
  <textarea name="" id="" cols="30" rows="2">ACCEPT! textarea</textarea>
  <button id="send_accept">SEND ACCEPT</button>
</form>
</div>

<div id="deny_msg">
<form id="deny_form">
  <textarea name="" id="" cols="30" rows="2">DENY! textarea</textarea>
  <button id="send_deny">SEND DENY</button>
</form>
</div>

jQuery

$('.option').unbind('click').bind("click", function() {

  var user_choice = $(this).attr('id');

  // IF ACCEPT
  if (user_choice === 'accept') {
    $('#accept_msg').slideDown('fast', function() {});
    $('#deny_msg').slideUp('fast', function() {});
    $('.btn_accept').css('background', 'orange');
    $('.btn_deny').css('background', '#ccc');
  // IF DENY
  } else if (user_choice === 'deny') {
    $('#accept_msg').slideUp('fast', function() {});
    $('#deny_msg').slideDown('fast', function() {});
    $('.btn_deny').css('background', 'blue');
    $('.btn_accept').css('background', '#ccc');
  }

});

$('#accept_form').unbind('submit').bind("submit", function() {
  var btn_send_accept = $('#send_accept');
  var btn_deny = $('#deny');

  $(btn_send_accept).css('cursor','auto');
  $(btn_send_accept).css('background','#ccc');
  $(btn_send_accept).text('Sending...');
  $(btn_send_accept).attr("disabled", "disabled");

  $(btn_deny).removeClass('option');
  $(btn_deny).removeClass('btn_deny');
  $(btn_deny).addClass('btn-disabled');
});

Any advice or suggestions?

Answer №1

Implement the use of .off() method to deactivate click event handler:

$(deny_button).off("click");

Answer №2

To prevent the action from being executed when a button is disabled, you can utilize the hasClass method in jQuery. Here is an example:

$('#mybutton').click(function() {
    if (!$(this).hasClass('btn-disabled')) {
        /* process button click */
    } else {
        /* cancel */
    }
});

Answer №3

Remember to ".unbind" it once the user clicks on "#btn_send_accept"

$(btn_deny).removeClass('option');
$(btn_deny).removeClass('btn_deny');
$(btn_deny).addClass('btn-disabled');
$(btn_deny).unbind('click');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on sending data to MongoDB using Postman

I am currently facing an issue while trying to send data to the MongoDB database using Postman. Despite everything seeming fine, I keep encountering errors. https://i.stack.imgur.com/Gcf5Q.jpg https://i.stack.imgur.com/ntjwu.jpg https://i.stack.imgur.co ...

Display the LOADING indicator until the entire page has finished loading

Here is the JavaScript code that I am currently using: function generateRequest(){ var request; if(window.XMLHttpRequest){ // Works with Firefox, Safari, Opera request = new XMLHttpRequest(); } else if(window.ActiveXObject) ...

Issue with Build System CTA's/Callback function functionality not operational

I have encountered an issue with my build/design system. Although everything works fine during development, when I publish my package and try to use the callback function, it does not return the necessary data for me to proceed to the next screen. I tried ...

Step-by-step guide on transferring an HTML5 sqlite result set to a server using AJAX

Imagine I have a scenario where I receive a result set as shown below: db.transaction( function(transaction) { transaction.executeSql( 'SELECT col1, col2, col3 FROM table;', [],function(transaction, result){ //need to find a ...

Utilizing Asynchronous Values in a Different JavaScript Function

Currently delving into the world of destructuring arrays in Javascript, I find myself faced with the challenge of accessing these variables in other functions. I attempted to retrieve the array by calling a function and then using console.log(thermostatAr ...

Having trouble getting DataTables to function when using jQuery's .post() method

Currently, I am in the process of developing a form that allows users to select a date range for displaying information using DataTables. Upon clicking the button, the selected dates are sent via jQuery's .post() function to retrieve the desired data ...

There is plenty of negative space within masonry design

I'm having trouble configuring a masonry layout for my cards. $('.grid').masonry({ fitWidth: true, horizontalOrder: true, // set itemSelector so .grid-sizer is not used in layout itemSelector: '.grid-item', // us ...

Sort the images before uploading them

Hey everyone, I'm having an issue with the sortable feature. I am currently using AJAX to temporarily save images and display them without uploading. Now, I would like to be able to sort those images and have a button to save the sorted version. The ...

What is the method for designing a CSS rule that solely activates when the body/html direction is set to "rtl"?

Our website is available in English at https://www.example.com. We have recently started using the GTranslate service to generate an Arabic version of the site at https://www.example.com/ar/. Upon reviewing the Arabic version, we noticed that GTranslate a ...

Storage in Ionic and variable management

Hello, I'm struggling to assign the returned value from a promise to an external variable. Despite several attempts, I have not been successful. export class TestPage { test:any; constructor(private storage: Storage) { storage.get('t ...

Delete placeholder once item is added to array in React

There are 5 numbered placeholders in my array, but I want them to disappear once an item is added. How can I achieve this? To see the solution, visit: https://codesandbox.io/s/qlp47q8j26 Hello.js import React from 'react'; import update from & ...

Retrieving dates from a database and populating them into a jQuery UI Picker using PHP

I need to retrieve dates from the database using PHP and highlight them in a datepicker. Here is how I am attempting to accomplish this: HTML Date: <input type="text" id="datepicker"> // Static dates // An array of dates var eve ...

Assign values to variables in a JavaScript file using node.js

My tech stack includes node.js, express.js, and either pug or jade. Within my server, I inject a variable called pageId into a view. In the pug view, I utilize this variable using the following script: script. document.addEventListener('DOMConten ...

Back up and populate your Node.js data

Below is the Course Schema I am working with: const studentSchema = new mongoose.Schema({ name: { type: String, required: true }, current_education: { type: String, required: true }, course_name: { ...

Utilize JQuery to pass the view name to a PartialViewResult in MVC

In order to streamline the process in my application, I am looking to pass Views names to a PartialViewResult method from Jquery. The goal is to utilize a single Controller and a single PartialViewResult method for the entire application. Here is the cu ...

React hook issue: useEffect not updating socket.io-client

Although I am attempting to receive updated values of react hooks inside the socket on function, unfortunately, it seems that the values are not being updated. Even if I edit the react hook values, the changes are not being reflected inside the socket. Her ...

Can you create an HTML page that does not include any images, screenshots, or descriptions?

I need to design an HTML page that resembles the image linked below, but without relying on any images. https://i.sstatic.net/PwioF.png ...

Error when trying to insert table data using AJAX with MAMP

After setting up a local MAMP environment, I decided to test inserting just a name into a database table. Despite no errors being shown in the console or PHP log, I am struggling to get the data entered into the database. Here is the snippet of HTML code: ...

Executing a jQuery function upon the completion of a Gravity Form submission

I am attempting to execute some jQuery code after a failed form submission in Gravity Forms, specifically when the validation detects an error. I attempted to use the Ajax:complete callback, but it does not trigger at all. The code I am trying to run ess ...

Utilizing innerfade plugin for displaying adaptive images on websites

After setting up a responsive design, I incorporated the innerfade plugin to create a carousel of pictures. However, I noticed that as the width of the page changes, the height of the pictures becomes smaller and fails to cover the entire area required. ...