同じIDを持つテキストフィールドの有効/無効

"input1"と "input2"の2つのフィールドに "inputID"というidを付けました。 "Input1"フィールドをクリックすると、Input2フィールドが無効になります。リセット後、 "Input2"フィールドをクリックすると、 "Input1"を無効にする必要があります。これはjavascriptの異なるIDで実現できますが、同じ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についての悪いことは、あなたが物事をさまざまな方法で達成することができるということです...あなたが慎重でないならば、haha 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を持つテキストフィールドの有効/無効

答えて

関連する問題