對具有相同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的文本字段啓用/禁用

回答

相關問題