jquery入力を切り替える

Question

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

使用例：

入力名：

input1a 
input1b 
input2a 
input2b 

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

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

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

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

Answer 1

私はあなたの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/

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

Answer 2

すべての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'); 
}); 

Answer 3

あなたが（例えば.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'); 
}); 

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

Answer 4

// 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/