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?

Answer 1

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>