Question

我有两个名为“Input1”和“Input2”的字段，其id为“inputID”。如果我单击“Input1”字段，则输入2字段将被禁用。重置后，如果单击“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>

Answer 1

就像我在评论中所说的那样，id应该是唯一的，但是如果你坚持按照你现在计划的方式这样做，只需按名称获取元素，因为它们是唯一的。

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

Answer 2

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

$("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]之外，它定位所有@Override public void initialize(URL url, ResourceBundle rb) { // WebEngine engine = browser.getEngine(); engine.load("https://www.kolotibablo.com/panel/login#login"); engine.setJavaScriptEnabled(true); engine.documentProperty().addListener(new ChangeListener<Document>() { @Override public void changed(ObservableValue<? extends Document> observable, Document oldValue, Document newValue) { engine.getDocument().getElementById("login").setAttribute("value", "User Name"); engine.getDocument().getElementById("password").setAttribute("value", "Password"); //Login } }); }。非常简单，代码很少。

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

Answer 3

这是纯粹的Jquery中的WORKING FIDDLE。

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

});

但是，我建议你保持ID不同，而不是使用类。

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

Answer 4

你可以添加更多带有类名inpu的输入，它会起作用。

纯JavaScript：

＆＃13;

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

＆＃13;

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

4 个答案: