启用/禁用具有相同ID的文本字段
[英]Enable/ Disable for the textfield with same ID
问题描述
I have two field named "Input1" and "Input2" with id as "inputID". 
我有两个名为“ Input1”和“ Input2”的字段，其ID为“ inputID”。 If I click "Input1" field,Input2 field to be disable. 如果单击“ Input1”字段，则禁用Input2字段。 And after reset, If I click "Input2" field,Text" Input1 should be disable. I can able to achieve this by different id in javascript. But I need to get this with same id. Can anyone please me on this? 并重置后，如果我单击“ Input2”字段，则应禁用“文本” Input1。我可以通过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>
4 个解决方案
解决方案1
1 2016-10-19 13:54:46
Like I said in my comment, the id's should be unique, but if you insist on doing this the way you have it planned now, just get the elements by name since they are unique. 就像我在评论中说的那样，ID应该是唯一的，但是如果您坚持按照现在的计划进行操作，则只需按名称获取元素即可，因为它们是唯一的。
function myFunc1() {
var input1 = document.getElementsByName("input1");
var input2= document.getElementsByName("input2");
if (input1.click){
input2.disabled=true;
}
}
解决方案2
1 2016-10-19 13:58:43
The answer above works, however if you want to make it really dynamic and clean, I'd make a function like this: 上面的答案是可行的，但是，如果您想使其变得真正动态和整洁，我可以使用以下函数：
$("input[type=text]").click(function() {
$("input[type=text]").not(this).attr("disabled", true);
});
$("button#reset").click(function() {
$("input[type=text]").attr("disabled", false);
});
This targets all input[type=text] except the one you clicked. 这将定位所有您单击的input[type=text] 。 Pretty simple and very little code. 非常简单，很少的代码。
DEMO http://jsbin.com/kegasehagi/edit?html,js,console,output 演示http://jsbin.com/kegasehagi/edit?html,js,console,output
解决方案3
1 2016-10-19 14:12:43
Here is a WORKING FIDDLE for you in pure Jquery. 这是纯Jquery中适合您的工作字段 。
$(function(){
$('input[type=text]').click(function(){
$('input[type=text]').each(function(){
if(!($(this).is(":focus"))){
$(this).attr('disabled',true);
}
});
});
});
But, I would suggest you to keep IDs different and use class instead. 但是，我建议您将ID保持不同，而改用class。
I hope, It will solve your purpose. 我希望，它将解决您的目的。
解决方案4
1 2016-10-19 14:20:00
you can add more inputs with class name inpu and it will works. 您可以使用类名inpu添加更多输入，它将起作用。
Pure JavaScript: 纯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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.