Enable and Disable Text Box Using Java Script?

Question

Here I try to Enable and Disable my text-box using Java Script.But my code is working fine in case of disable but not able to regain the enable state.I added my snippet below.Here I have used the following JS query for the purposes.

getElement(elm).setAttribute("disabled", true);

getElement(elm).setAttribute("disabled", false);

JS ATTEMPT

/*----------FUNCTION TO GET AN ELEMENT BY ID-------------------*/
function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}
//==============================================================//
/*-------------FUNCTION TO DISABLE A TEXT BOX-------------------*/
function disable(elm){
    return getElement(elm).setAttribute("disabled", true);
}
//==============================================================//
/*--------------FUNCTION TO ENABLE A TEXT BOX------------------*/
function enable(elm){
    return getElement(elm).setAttribute("disabled", false);
}

getElement("button").addEventListener("click",function(){
disable("text-box2");
});
getElement("button2").addEventListener("click",function(){
enable("text-box2");
});

<input type="text" id="text-box1"/>
<input type="text"  id="text-box2"/>
<button id="button">disable</button>
<button id="button2">enable</button>

CSS SOLUTION

Here I have a solution using css and it's working fine.In this method we faking the pointer by using the css property pointer-events: none .

/*----------FUNCTION TO GET AN ELEMENT BY ID--------------------*/
function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}
//==============================================================//
/*-------------FUNCTION TO DISABLE A TEXT BOX-------------------*/
function disable(elm){
    return getElement(elm).classList.add("disable");
}
//==============================================================//
/*--------------FUNCTION TO ENABLE A TEXT BOX-------------------*/
function enable(elm){
    return getElement(elm).classList.remove("disable");
}

getElement("button").addEventListener("click",function(){
disable("text-box2");
});
getElement("button2").addEventListener("click",function(){
enable("text-box2");
});

.disable{
    pointer-events: none ! important;
    opacity: 0.4 ! important;
}

<input type="text" id="text-box1"/>
<input type="text"  id="text-box2"/>
<button id="button">disable</button>
<button id="button2">enable</button>

But I would like to have a solution without css. Is there a possible solution without css?

Nimitt Shah · Accepted Answer · 2018-09-11 16:47:40Z

3

You should remove Attribute instead of setting it (disable) to false.

function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}
//==============================================================//
/*-------------FUNCTION TO DISABLE AN TEXT BOX-----------------*/
function disable(elm){
    return getElement(elm).setAttribute("disabled", true);
}
//==============================================================//
/*--------------FUNCTION TO DISABLE AN TEXT BOX----------------*/
function enable(elm){
    return getElement(elm).removeAttribute("disabled");
}

getElement("button").addEventListener("click",function(){
disable("text-box2");
});
getElement("button2").addEventListener("click",function(){
enable("text-box2");
});

<input type="text" id="text-box1"/>
<input type="text"  id="text-box2"/>
<button id="button">disable</button>
<button id="button2">enable</button>

answered Sep 11, 2018 at 16:47

Nimitt Shah

4,6072 gold badges12 silver badges25 bronze badges

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

2 Comments

ADH - THE TECHIE GUY Over a year ago

great answer bro ..:)

ADH - THE TECHIE GUY Over a year ago

according to stackoverflow it's takes about 5 mins to accept an answer after posting a question

gaetanoM · Accepted Answer · 2018-09-11 16:56:22Z

A different approach can be based on input disabled attribute:

This Boolean attribute prevents the user from interacting with the input. In particular, the click event is not dispatched on disabled controls, and disabled controls aren't submitted with their form.

function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}
//==============================================================//
/*-------------FUNCTION TO DISABLE AN TEXT BOX-----------------*/
function disable(elm){
    getElement(elm).disabled = true;
}
//==============================================================//
/*--------------FUNCTION TO DISABLE AN TEXT BOX----------------*/
function enable(elm){
    getElement(elm).disabled = false;
}

getElement("button").addEventListener("click",function(){
    disable("text-box2");
});
getElement("button2").addEventListener("click",function(){
    enable("text-box2");
});

<input type="text" id="text-box1"/>
<input type="text"  id="text-box2"/>
<button id="button">disable</button>
<button id="button2">enable</button>

DCR · Accepted Answer · 2018-09-11 17:18:48Z

1

function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}
//==============================================================//
/*-------------FUNCTION TO DISABLE AN TEXT BOX-----------------*/
function disableEnable(elm){
    getElement(elm).disabled = !getElement(elm).disabled
    if(getElement(elm).disabled == true)
      document.getElementById('button').innerHTML = "enabled"
    else
      document.getElementById('button').innerHTML = "disabled"
    
}


getElement("button").addEventListener("click",function(){
    disableEnable("text-box2");
});

<input type="text" id="text-box1"/>
<input type="text"  id="text-box2"/>
<button id="button">disable</button>

answered Sep 11, 2018 at 17:18

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Comments

Ruben Swieringa · Accepted Answer · 2018-09-11 16:53:06Z

0

Keep in mind that setAttribute() sets attribute values as strings.

The correct way:

disable: element.setAttribute('disabled', 'disabled')
enable: element.removeAttribute('disabled')

If the 'disabled' attribute has any value at all, the element in question will be disabled. This means that passing either true or false (which will turn into "true" and "false" respectively) will both times disable your element.

answered Sep 11, 2018 at 16:53

Ruben Swieringa

816 bronze badges

Collectives™ on Stack Overflow

Enable and Disable Text Box Using Java Script?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related