使用 Java 脚本启用和禁用文本框？

Question

我在这里尝试使用 Java Script.But 启用和禁用我的文本框我的代码在禁用的情况下工作正常但无法重新启用 state.I 添加了我的代码段 below.Here 为此，我使用了以下 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 的解决方案并且它正在工作 fine.In 这个方法我们通过使用 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

您应该删除 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>

Answer 2

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

正确的做法：

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

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

Answer 3

不同的方法可以基于 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>

Answer 4

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>

使用 Java 脚本启用和禁用文本框？

Enable and Disable Text Box Using Java Script?

html

javascript

textbox

disabled-input