Activate a button with the power of JQuery

How can I make the "Save" button active when I click on "Edit"? I've attempted the following code, but it doesn't seem to have any effect:

$(document).ready(function() {
  $("#btnEdit").click(function() {
    $("btnSave").removeProp("disabled");

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
  <button id="btnEdit" type="button" class="btn btn-danger mt-4">Edit</button>
  <button id="btnSave" type="submit" class="btn btn-success mt-4" disabled>Save</button>
</div>

javascripthtmljquerycss

Answer №1

To fix the issue, you should be using removeAttr() instead of removeProp(). Another option is to use .prop("disabled", false) to change the property state and override the attribute.

Additionally, there is a typo in your code: $("btnSave") is missing the "#" symbol for id selector.

$(document).ready(function() {
  $("#btnEdit").click(function() {
    $("#btnSave").removeAttr("disabled");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
  <button id="btnEdit" type="button" class="btn btn-danger mt-4">Edit</button>
  <button id="btnSave" type="submit" class="btn btn-success mt-4" disabled>Save</button>
</div>

Answer №2

Consider utilizing

$(document).ready(function() {
  $("#btnEdit").click(function() {
    $("#btnSave").prop("disabled", false);
  });
});

Another approach is to implement functions instead of relying on the click event listener:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
  <button id="btnEdit" onclick="disableButton(this)" type="button" class="btn btn-danger mt-4"&‌​gt;Edit</button>
  <button id="btnSave" type="submit" class="btn btn-success mt-4" disabled>Save</button>
</div>

as well as

<script>
  function disableEl(el) {
      el.disabled = false;
  }
</script>

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

After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, t ...

cssruby-on-rails-3twitter-bootstrap

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has ...

javascripthtmlcsstwitter-bootstrap

Is Google Tag Manager causing a delay in the window.load event?

Upon loading my page, an ajax call is triggered. $(window).load(function() { updateDeliverySlots(); }); In addition, the Google Tag Manager javascript code resides at the top of the body section. Although it's recommended to place it in the head, ...

javascriptjqueryajaxgoogle-tag-manager

Having issues with $timeout functionality in angular.js

I've implemented $timeout in my controller but it doesn't seem to be functioning correctly. app.controller("Friendsrequests",['$http','$log','$location','$timeout','$scope', function($http,$log,$ ...

javascriptangularjs

Incorporating Vue into a dated website by eliminating the div and replacing it with new dynamic Vue components

As I attempt to integrate Vue into my old website, I want the existing jQuery scripts to continue functioning and the old HTML content to be displayed. However, I am encountering an issue where the el element and its contents are being removed. This probl ...

javascriptvue.js

What is the best way to add an automatic data loading feature while scrolling?

I've been grappling with this issue for a couple of days now. My current project involves displaying a list of topics, and everything seems to be functioning correctly. However, I'm facing an obstacle - when scrolling down to the bottom of the pa ...

javascriptphpjqueryajax

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

javascripthtmlcssfontsfont-size

Tips for minimizing the size of this script

I am new to using Jquery and Javascript, but I have managed to create a script that communicates with a php controller in symfony2. My query is, how can I shorten the script length? Is there a more efficient way to solve the logic instead of using the swi ...

javascriptjquery

Issue locating module '/booksSchema' in MongoDB on Mac Catalina

I have created three files named MongoDBConnect.js, booksSchema.js, and Server.js in my Visual Studio environment. However, when I run node server.js, I encounter an error message stating "Cannot find module '/booksSchema'". It is important to n ...

javascriptnode.jsmongodbmongooseschema

Adjusting the length of the To, CC, and BCC text fields in web design

I'm developing a webpage that will collect email addresses for user notifications. I want to ensure the length limits of the 'to,' 'cc,' and 'bcc' fields. According to RFC 2821/3696, an email address can be up to 256 cha ...

htmlwebhtml-email

Glimmering border in jQuery width transition

I am facing a challenge in developing a horizontal accordion style slider that is not dependent on fixed widths. The issues I encountered include: The 'flickering edge' on the right-hand list item during animation Depending on the max-width set ...

jquery

"An issue with AngularJS ngTable causing a delay in the rendering of Ajax

Struggling with ngTable Setup Having trouble mastering the use of ngTable by going through the ngTable ajax demo. I attempted to follow along with the example as closely as possible, but I'm encountering a deviation in defining an ngResource inline w ...

javascriptajaxjsonhtmlangularjs

Difficulty in modifying an object's property/value using a variable within a function

VueJS is the framework I am currently working with and I am attempting to utilize v-model to link checkboxes to values stored within an object: jobsChecked: {Baker: false, Cook: false, Miner: false} // etc... Here is the checkbox element setup: <div c ...

javascriptvue.jsobjectvuejs2vue-component

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

Combining TypeScript and JavaScript for efficient mixins

I came across an article on MDN discussing the usage and creation of mix-ins (link). Intrigued, I decided to try implementing it in TypeScript: type Constructor = new (...args: any) => any; function nameMixin(Base: Constructor) { return class extends ...

javascripttypescriptdynamicsubclassmixins

Can you provide guidance on integrating this jQuery script into my Next.Js application effectively?

I have been using a script on a plain HTML website, importing it via the <script> tag: (function($) { var wa_time_out, wa_time_in; $(document).ready(function() { $(".wa__btn_popup").on("click", function() { if ($(&qu ...

javascriptjqueryreactjsnext.jsscript-tag

The function Uri.EscapeDataString() helpfully changes the character "/" to %2F

I'm currently working on converting strings to URI format so that I can use them in URLs to display images on my webpage. My project is built using ASP.NET Core. So far, I've tried both System.Web.HttpUtility.UrlEncode() and Uri.EscapeDataString ...

c#htmlasp.neturluri

Unable to obtain accurate data returns

What is the issue here: $('#btnSend').click(function() { var msg = $('#txtar').val(); // textarea alert (msg); // this works fine, for instance 'xyz' $.ajax( { type: "POST", url: "sendD ...

phpjqueryajax

Child functional component does not refresh after its props are altered by its parent component

Looking at the following code: MainParentComponent.js let data = 0; function MainParentComponent() { function handleClick() { data++; } return (<> <button onClick={handleClick}>Increase</button> < ...

javascriptreactjs

Update to the center of the JavaScript map on Google Maps

Hello everyone, While I may not consider myself a JavaScript expert, I often piece together code snippets from various sources to get things done. Currently, I am facing a challenge with styling Google maps as they don't seem to be customizable unles ...

javascripthtmlgoogle-maps