对具有相同ID的文本字段启用/禁用

我有两个名为“Input1”和“Input2”的ID为“inputID”的字段。如果我点击“输入1”字段，输入2字段被禁用。复位后，如果我点击“输入2”字段，文本“输入1应该被禁用。” 我可以通过不同的id在javascript中实现这一点，但我需要得到这个相同的ID 任何人都可以请我这个？对具有相同ID的文本字段启用/禁用

<!DOCTYPE html> 
<html> 
<body> 
<script> 
function myFunc1() { 
var input1 = document.getElementById("input1"); 
var input2= document.getElementById("input2"); 
if (input1.click){ 
    document.getElementById("input2").disabled=true; 
} 
} 
function myFunc2() { 
var input1 = document.getElementById("input1"); 
var input2= document.getElementById("input2"); 

if (input2.click) { 
    document.getElementById("input1").disabled=true; 
} 
} 
</script> 
<table> 
    <tr> 
    <td>Field1: <input type="text" id="input1" onclick="myFunc1();" /></td> 
    </tr> 
    <tr> 
    <td>Field2 : <input type="text" id="input1" onclick="myFunc2();" /></td> 
    </tr> 

</table> 
</body> 
</html>

来源

2016-10-19 Shailu

ID是应该是唯一的。 Id的全部要点是给元素一个UNIQUE标识符。 – user1289451

ID必须是唯一的 - 但您可以使用类别来替代目标... –

将onchange事件绑定到两个输入，在这两个输入中检查它是否为空并添加禁用属性，如果它为空，请将简单属性简单地移除那样。 –

就像我在我的评论说，该ID的应该是唯一的，但如果你坚持这样做的方式，你有现在的计划，刚刚获得通过名称的元素，因为它们是独一无二的。

function myFunc1() { 
var input1 = document.getElementsByName("input1"); 
var input2= document.getElementsByName("input2"); 
if (input1.click){ 
    input2.disabled=true; 
} 
}

来源

2016-10-19 13:54:46 user1289451

上面的答案是有效的，但是如果你想使它真正动态和干净，我会做出这样的功能：

$("input[type=text]").click(function() { 

    $("input[type=text]").not(this).attr("disabled", true); 

}); 


$("button#reset").click(function() { 

    $("input[type=text]").attr("disabled", false); 

});

这个目标的所有input[type=text]，除非你点击了一个。非常简单，代码非常少。

DEMO http://jsbin.com/kegasehagi/edit?html,js,console,output

来源

2016-10-19 13:58:43 James

很好的答案。其实我只是想更新我的答案，除了我的原始答案外，还提出了一个“更清洁”的方法。 – user1289451

@ user1289451谢谢！关于JavaScript的好处是你可以用许多不同的方式完成任务。关于JavaScript的坏处是你可以用许多不同的方式完成任务......如果你不小心，哈哈js会变得非常混乱。 – James

同意。我注意到的一件事是，当大多数人提出问题时，他们会因为对代码进行重大更改而拖延。所以，我通常会尽量以尽可能接近他们的代码结构的方式来回答。即使这不是我写的方式。但建议更好的方法总是有帮助的。 – user1289451

这里是纯粹的Jquery为您。

$(function(){ 
$('input[type=text]').click(function(){ 
    $('input[type=text]').each(function(){ 
     if(!($(this).is(":focus"))){ 
     $(this).attr('disabled',true); 
     } 
    }); 
}); 

});

但是，我建议你保持不同的ID和使用类代替。

我希望它会解决你的目的。

来源

2016-10-19 14:12:43 gschambial

感谢您的回答。它工作正常 – Shailu

您可以添加更多类名为inpu的输入，它将起作用。

纯JavaScript：

<!DOCTYPE html> 
 
    <html> 
 
    <head><title>test page</title></head> 
 
    <body> 
 
    <table> 
 
     <tr> 
 
     <td>Field1: <input type="text" class='inpu' onclick="focusonly(this);" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Field2 : <input type="text" class='inpu' onclick="focusonly(this);" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Field3 : <input type="text" class='inpu' onclick="focusonly(this);" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Field4 : <input type="text" class='inpu' onclick="focusonly(this);" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td><button onclick='reset();'>reset</button></td> 
 
     </tr> 
 
    
 
    </table> 
 
    <script> 
 
    function reset(){ 
 
    var inpu = document.getElementsByClassName("inpu"); 
 
    for(var i=0;i<inpu.length;i++){ 
 
    document.getElementsByClassName("inpu")[i].value = ""; 
 
    document.getElementsByClassName("inpu")[i].disabled = false; 
 
    } 
 
    } 
 
    function focusonly(el){ 
 
    var inpu = document.getElementsByClassName("inpu"); 
 
    for(var i=0;i<inpu.length;i++){ 
 
    document.getElementsByClassName("inpu")[i].disabled = true; 
 
    } 
 
    el.disabled = false; 
 
    } 
 
    
 
    </script> 
 
    </body> 
 
    </html>

来源

2016-10-19 14:20:00

对具有相同ID的文本字段启用/禁用

回答

相关问题