2012-03-14 27 views
0

4つのテキスト入力を切り替える方法を見つける必要があります。jquery入力を切り替える

使用例:

入力名:

input1a 
input1b 
input2a 
input2b 

ユーザまたは入力Bを入力いずれかでテキストのみ入力することができます。

ユーザーがinput1aをクリックすると、input1aとinput2aにのみテキストを入力できます。 Input1bとinput2bの値は削除され、色あせ(テキスト入力は通常のラベルに変わります)、その逆もあります。

ユーザーは、入力aとbを切り替えることもできます。

これを行うjqueryコードはありますか?どんな助けもありがとう。

+0

私は、このための利用モデルが何であるか興味が? –

+0

好奇心が猫を殺した;)それは実際に複雑なスコアの項目ですが、私はできるだけシンプルにしています。 – user962449

+0

すべての入力はテキストまたはラベルです。クリックすると、テキストの入力またはラベル内をクリックしたことを意味します。私はそれを少しクリアすることを願っています。 – user962449

答えて

0

私はあなたのHTML構造上明確ではないんだけど、このようなものは、あなたが記述するものであるように思わ:、私は、あなたがラベルを持っていると仮定しています。この場合

$(function() { 
    $('body').on('click', 'label', function() { 
     if ($(this).next('input').hasClass('disabled')) { 
      $('input').toggleClass('disabled').val(''); 
     } 
    }); 
}); 

と入力がありますほかのすべての。 .disabledは単に入力を隠すクラスです。

デモ:http://jsfiddle.net/jtbowden/bKW4Q/

その後、彼らはイベントをクリックして起動しませんので、あなたはおそらく、本当にdisable入力する必要はありません。しかし、あなたがそれらをクリアしているので、ちょうどあなたの無効なクラスがそれらを灰色ます

デモ:http://jsfiddle.net/jtbowden/VWYpe/

これは、あなたが入力の代わりに、ラベルをクリックすることができます。

+0

これは完璧です...しかし、ラベルの代わりに入力をクリック可能にするにはどうしたらいいですか? – user962449

+0

編集を参照してください。入力を非表示にするのではなく、グレーアウトするだけです。 –

+0

私が必要とした100%。ありがとう! – user962449

0

すべてのinputa要素にクラス 'a'を追加し、すべてのinputbにクラス 'b'を追加することもできます。あなたがそうするなら、あなたはこのようなことをすることができます。

$('.a').on('click', function() { 
    $('.b').attr('disabled', 'disabled'); 
    $('.a').removeAttr('disabled'); 
}); 
$('.b').on('click', function() { 
    $('.a').attr('disabled', 'disabled'); 
    $('.b').removeAttr('disabled'); 
}); 
0

あなたが(例えば.a.b、)入力にクラスを追加することができた場合、あなたはこのような何か書くことができます:あなたの状況に合わせて、必要に応じて..youは、セレクタを調整することができます

var setActive = function(selector) { 
    $('.a, .b').removeAttr('disabled'); 
    $(selector).attr('disabled', 'disabled'); 
} 

$('.a').click(function(){ 
    setActive('.a'); 
}); 

$('.b').click(function(){ 
    setActive('.a'); 
}); 

を、しかし、あなたはその考えを得る。これは、既にアクティブな要素内のクリックを非常に上手く処理することはできませんが、あなたが望むことを行う必要があります。

+0

残念ながら、無効な入力をクリックすることはできません。クリックハンドラは起動しません。 –

0
// Init 
$('input').attr("disabled", "disabled"); 

// Bind click 
$('label').click(function() { 
    // Clear 
    $('input').each(function() { $(this).val("").attr("disabled", "disabled"); }); 

    // Activate 
    $(this).next('input').removeAttr("disabled"); 
}); 

サンプル
http://jsfiddle.net/CZPbK/

関連する問題