先日、業務の関係でINPUT入力フォームのDisabledを操作する
サンプルスクリプトを作ったのでここでも紹介してみます。

INPUT入力フォームが2つある場合で、
片方の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」のスタイルを追加してあります。

こんな感じですが何かの際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでINPUTのDisabledを操作してみる

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR