WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

先日、業務の関係で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」のスタイルを追加してあります。

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

jQueryでINPUTのDisabledを操作してみる」への3件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です