Is it possible to remove the "disabled" attribute using JS, but the button remains disabled?

Question

Is it possible to remove the "disabled" attribute using JS, but the button remains disabled?

There are two buttons on my page: the first one is currently disabled, and the second one is supposed to enable the first button. That's the plan. Button 1:

$(document).ready(function() {
  $('#click').click(function() {
    document.getElementById("submit-disabled").disabled = false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submit-disabled" name="cusubmit" value="Update" class="btn btn-primary" disabled />
<input id="click" type="button" value="Enable" class="btn btn-primary" />

After clicking on button 2, the "disabled" attribute is removed from button 1, but it remains disabled...

Any suggestions or ideas on how to resolve this issue?

javascript

Answer 1

Answer №1

It's puzzling why you're using a mix of pure JS and jQuery. It's best to stick with one (original JS tends to be faster). Your code seems fine to me. I even set up a FIDDLE for reference:

FIDDLE: https://jsfiddle.net/abc123xyz/

var $click = document.getElementById('click');
var $submit = document.getElementById('submit-disabled');

$click.addEventListener('click', function () {
    $submit.disabled = false;
});

There might be another factor at play here. Give the provided code a try, and if the issue persists, feel free to share more code so we can help pinpoint the problem.

Answer 2

It's puzzling why you're using a mix of pure JS and jQuery. It's best to stick with one (original JS tends to be faster). Your code seems fine to me. I even set up a FIDDLE for reference:

FIDDLE: https://jsfiddle.net/abc123xyz/

var $click = document.getElementById('click');
var $submit = document.getElementById('submit-disabled');

$click.addEventListener('click', function () {
    $submit.disabled = false;
});

There might be another factor at play here. Give the provided code a try, and if the issue persists, feel free to share more code so we can help pinpoint the problem.

Answer 3

Answer №2

To properly remove the disabled attribute, you must specifically target it:

$("#submit-disabled").removeAttr("disabled");

Answer 4

To properly remove the disabled attribute, you must specifically target it:

$("#submit-disabled").removeAttr("disabled");

Is it possible to remove the "disabled" attribute using JS, but the button remains disabled?

Answer №1

Answer №2

Similar questions

What is the best way to transfer a row value from one table to another and then reinsert it back into the original table

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Allow users to zoom in and out on a specific section of the website similar to how it works on Google Maps

JQuery computes the grand total without displaying it on the screen

What are the most effective strategies for managing vast amounts of data using JS fetch?

The argument for the e2e test is invalid because it must be a string value

Possible solutions for AngularJS using ng- tags

What is the best way to invoke a function in Typescript while retrieving data?

Unlock the power of AJAX in your WordPress site

Issues arise in Angular 4 when the "Subscribe" function is repeatedly invoked within a for/switch loop

Creating virtual hover effects on Android browsers for touch events

What is the command line method for running ESLint in flat configuration?

Why is `screen` important?

disable input box stationary

The div element is not adjusting its size according to the content it

Retrieving the link to share for every video located in the Dropbox folder

The observable did not trigger the next() callback

Having trouble accessing variables from the dotenv file in a NextJS project

beforeprinting() and afterprinting() function counterparts for non-IE browsers

When attempting to use a value outside of its block, the function may return a