先日、業務の関係でINPUT入力フォームのDisabledを操作する
サンプルスクリプトを作ったのでここでも紹介してみます。
INPUT入力フォームが２つある場合で、
片方のINPUTを入力しないと次のINPUTの入力を認めない場合のサンプル。
まず、動作サンプルから
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
－－－－－－－－－－－－－－－－－－－－－－
「入力フォームA」＠「入力フォームB」
－－－－－－－－－－－－－－－－－－－－－－
「A」の入力フォームに何か入力すると、「B」の入力フォームが入力可能になります。
「A」「B」を入力後、「A」の入力フォームの内容を削除した際には、
「B」は入力不可になるが入力内容は一旦保持。
「A」からフォーカスが離れた際に「A」の中に入力が何もされていなかった場合に
「B」の値は削除となり空にします。
動作についてはこんな感じに。
「B」の削除制御などは変更も可能。
スクリプトは以下のような感じに。
◆SCRIPT ———————————————————–
$(function(){
var mailad1 =($(‘input#form1’).val());
$(‘input#form2’).each(function(){
if(mailad1 == “”) {
$(this).css({backgroundColor:”#ccc”,border:”#a7a6aa 1px solid”}).attr(‘disabled’,’disabled’).val(”);
} else {
$(this).css({backgroundColor:”#fff”,border:”#a7a6aa 1px solid”}).attr(‘disabled’,”);
}
});
$(‘input#form1’).bind(‘keyup change’,function(){
if(this.value == “”) {
$(‘input#form2’).css({backgroundColor:”#ccc”,border:”#a7a6aa 1px solid”}).attr(‘disabled’,’disabled’);
} else {
$(‘input#form2’).css({backgroundColor:”#fff”,border:”#a7a6aa 1px solid”}).attr(‘disabled’,”);
}
});
$(‘input#form1’).blur(function(){
if(this.value == “”) {
$(‘input#form2’).val(”);
}
});
});
——————————————————————–
単純にINPUTのvalueの値を見て、「disabled」を付けたり消したりしているだけ。
JSなどでINPUTを操作する際、動的に背景色「background」を追加すると、
そのINPUTの枠線「border」がinsetっぽいスタイルに変更してしまうのがいつもめんどくさく思う。
それを回避するために上記スクリプトではわざわざ「border」のスタイルを追加してあります。
こんな感じですが何かの際に是非。。。