使用 Javascript 启用和禁用文本框？

Question

在这里，我尝试使用 Java Script 启用和禁用我的文本框。但我的代码在禁用但无法恢复启用状态的情况下工作正常。我在下面添加了我的 sn-p。在这里我使用了以下JS 查询为目的。

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

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

JS 尝试

/*----------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 解决方案

这里我有一个使用css 的解决方案，它工作正常。在这种方法中，我们使用css 属性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>

但我想要一个没有css 的解决方案。没有css有没有可能的解决方案？

Answer 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>

Answer 2

不同的方法可以基于input disabled attribute：

此布尔属性可防止用户与输入进行交互。特别是，click 事件不会在禁用的控件上调度，并且禁用的控件不会与其表单一起提交。

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>

Answer 3

请记住，setAttribute() 将属性值设置为字符串。

正确方法：

• 禁用：element.setAttribute('disabled', 'disabled')
• 启用：element.removeAttribute('disabled')

如果 'disabled' 属性有任何值，相关元素将被禁用。这意味着传递 true 或 false（将分别变为“true”和“false”）都会禁用您的元素。

Answer 4

您应该删除 Attribute 而不是将其设置（禁用）为 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>