How to prevent an input from being disabled?

Question

I have an input field <input> with id my-field to which some plugin adds the attribute disabled="disabled" after the first escape.

This is a problem so i'm trying to keep that disabled attribute away from it with the code below:

var input = document.getElementById("my-field");
document.addEventListener("change", input, function(){
    setTimeout(function() {
        input.disabled = false;
    }, 50)
});

but it's not working, what am I doing wrong?

EDIT: as suggested below i corrected the boolean to have no "" but it's not working.

The string value "false" is not the same as the boolean value false. — Pointy
– Pointy, Commented Jan 25, 2020 at 16:41
corrected it thanks, but it's not working, it also threw error about the eventListener second parameter, so i've put the input var there instead, still no luck — Nathan Bernard
– Nathan Bernard, Commented Jan 25, 2020 at 17:00
The addEventListener() API does not work that way. You add listeners directly to elements. What you have above is how you'd do it with jQuery, sort-of, and you included jQuery as a tag in the question. If you're not really using jQuery, you should remove the tag. — Pointy
– Pointy, Commented Jan 25, 2020 at 17:27
that's right, long time i didnt code in js, i confused the jquery version, and you're correct I can't use jqeury i removed the tag — Nathan Bernard
– Nathan Bernard, Commented Jan 25, 2020 at 17:46

sney2002 · Accepted Answer · 2020-01-25 17:48:28Z

1

Try to redefine the setAttribute method and disabled property in the input, something like:

function removeDisabled(input) {
    input.disabled = false;
    input.removeAttribute('disabled');
    Object.defineProperties(input, {
        disabled: {
            get: function() { return false; }
        },
        setAttribute: {
            value: function() {}
        }
    })
}

removeDisabled(document.getElementById('my-field'))

answered Jan 25, 2020 at 17:48

sney2002

9064 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarfraaz talat · Accepted Answer · 2020-01-25 16:50:41Z

1

You can set it this way

Vanilla Javascript

// Enable
document.getElementById("my-field").disabled = false;

// Disable
document.getElementById("my-field").disabled = true;

JQuery

// Enable
$("#my-field").prop( "disabled", false );

// Disable
$("#my-field").prop( "disabled", true );

edited Jan 25, 2020 at 16:50

answered Jan 25, 2020 at 16:39

Sarfraaz talat

6354 silver badges10 bronze badges

4 Comments

Nathan Bernard Over a year ago

does .prop work for vanilla too? cause i don't have jquery at this time

Sarfraaz talat Over a year ago

Added the vanilla solution for you

Nathan Bernard Over a year ago

Doesn't work, it's the same as my solution but without "" on boolean, as @Pointy suggested above

Sarfraaz talat Over a year ago

If your problem is overriding other plugin disabling input, then you should write setTimeout outside event listener because input change event will never get triggered if the input is getting disabled by default

Nave Sade · Accepted Answer · 2020-01-25 17:08:24Z

0

If you just want to remove Attribute, use the removeAttribute function like this:

document.querySelector('#my-field').removeAttribute('disabled')

As for your solution, I'd recommend listening to changes on the element, rather than guessing the timeout, something like this:

new MutationObserver(([{ attributeName, target }]) =>
        attributeName === 'disabled' && target.removeAttribute('disabled')
    ).observe(document.querySelector('#my-field'), { attributes: true });

edited Jan 25, 2020 at 17:08

answered Jan 25, 2020 at 16:46

Nave Sade

4412 silver badges6 bronze badges

5 Comments

Nathan Bernard Over a year ago

tried that with getElementById instead of querySelector, no luck

Nave Sade Over a year ago

@NathanBernard The function "getElementById", other than its longer and more cumbersome name, is not generic, and refers only to IDs. If you'll want to use a selector that includes class or attribute, you will need to replace the entire function. In the case of "querySelector", control is more convenient, and only selector should replaced.

Nathan Bernard Over a year ago

is your solution with Observer supposed to work straigth away? cause i tried it but didn't work (i obviously set the correct #id in the queryselector). thanks

Nave Sade Over a year ago

@NathanBernard Look, you are passing the requested element as an argument to it. If this element is not in the DOM yet, then of course nothing will happen. If this document.querySelector('#my-field') returns null, it won't work.

Nathan Bernard Over a year ago

That's why i used the .addEventListener("change", input, [...] targetting the document, but as Pointy stated above i confused jquery with vanilla, so i'd need the equivalent of it in vanilla i guess

kaushik dey · Accepted Answer · 2020-01-25 17:10:28Z

0

$("#my-field").removeAttr("disabled"); document.getElementById("my-field").removeAttribute("disabled")

answered Jan 25, 2020 at 17:10

kaushik dey

1022 bronze badges

Comments

zigvag · Accepted Answer · 2020-01-25 17:45:13Z

0

Use jquery to solve your problem

For enable: $("#element").prop( "disabled", false );

For disable: $("#element").prop( "disabled", true );

answered Jan 25, 2020 at 17:45

zigvag

11 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to prevent an input from being disabled?

5 Answers 5

Comments

4 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related