Question

这里我尝试使用Java Script启用和禁用文本框。但是在禁用但无法恢复启用状态的情况下，我的代码可以正常工作。我在下面添加了代码段。在这里，我使用了以下{ {1}}进行查询。

getElement（elm）.setAttribute（“ disabled”，true）;

getElement（elm）.setAttribute（“ disabled”，false）;

JS ATTEMPT

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");
});

CSS解决方案

这里有一个使用<input type="text" id="text-box1"/> <input type="text" id="text-box2"/> <button id="button">disable</button> <button id="button2">enable</button>的解决方案，它工作正常。在这种方法中，我们使用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，有没有可能的解决方案？

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

可以基于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

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 4

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

正确的方法：

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

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

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

4 个答案: