jquery - ペアの入力でjQueryの切り替えを無効/有効にする

Question

2つのペアの入力フィールドがあり、それらの間で有効/無効を切り替える必要があります（一方が有効になっている場合は、もう一方を無効にする必要があります）。

私はこれにどのようにアプローチするのか分かりません、何かアイデアはありますか？

Answer 1

例：item1が有効、item2が無効

<input type="text" id="item1">
<input type="text" id="item2" disabled>

<button id="switch">Click here to toggle</button>

これにより、ある種のスイッチがクリックされたときにアイテムが切り替わります。それを切り替えるもの、つまり上のボタンでそれを使用してください：

$("#switch").on("click", function()
{
    $("#item1").prop("disabled", !$("#item1").prop("disabled"));
    $("#item2").prop("disabled", !$("#item2").prop("disabled"));
});

あなたが本当にそれらが反対であることを確認したい場合;

$("#switch").on("click", function()
{
    var toggle = $("#item1").prop("disabled");

    $("#item1").prop("disabled", !toggle );
    $("#item2").prop("disabled", toggle ); // item2 will always be the opposite of item1
});

Answer 2

これにより、有効な入力が得られます。

<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="text" value="Text1" />
<input type="checkbox" value="CheckBox1" />
<input type="radio" value="Radio1" />
<input type="submit" value="Submit1" />
<input type="reset" value="Reset1" />

$(document).ready(function() {
    var id = "";
    // Test
    $('input').attr("disabled", "disabled");
    // Remove attr disabled from text to try code
    $('input[type="text"]').removeAttr("disabled");

    // Check for attr != disabled here
    $('input').each(function () {
        if ($(this).attr("disabled") != "disabled")
        { id = $(this).get(); }
    });
    // Found
    alert($(id).val());
});

http://jsfiddle.net/sVDYe/83/

これにより、チェックボックス以外のすべての入力の無効化が切り替わります。

<input type="button" value="Button1" disabled="disabled" />
<input type="button" value="Button2" disabled="disabled" />
<input type="text" value="Text1" disabled="disabled" />
<input type="checkbox" value="CheckBox1" />
<input type="radio" value="Radio1" disabled="disabled" />
<input type="submit" value="Submit1" disabled="disabled" />
<input type="reset" value="Reset1" disabled="disabled" />

$(document).ready(function() {
    var id = "";
    // Check for attr != disabled here
    $('input').each(function () {
        if ($(this).attr("disabled") != "disabled")
        { id = $(this).get(); }
    });
    // Found
    alert($(id).val());
    // Make sure all disabled but this
    $('input').attr("disabled", "disabled");
    $(id).removeAttr("disabled");
});

http://jsfiddle.net/sVDYe/88/

そして最後に2つの入力を切り替えます。

$(document).ready(function() {
    $('input').click(function () {
        var id = $(this).get();
        toggleButtons(id);
    });
    function toggleButtons(id){
        // Check for attr != disabled here
        $('input').removeAttr("disabled");
        $(id).attr("disabled","disabled");
    }        
});

http://jsfiddle.net/sVDYe/91/

このように簡単です。また、真の1つだけが有効になっていることを確認してください。

Answer 3

私は問題をいじって、このスクリプトを思いついた：

inputFields = $("#group").find("input");

$("#toggleFields").on("click", function(){
    inputFields.each(toggleElement);        
});

function toggleElement(index, element) {
    element.disabled = !element.disabled;
    //idea from: http://stackoverflow.com/a/4702086/1063730
}
​

​

別のイベントが必要な場合は、トグルの原因を$("#toggleFields").on("click")ニーズと交換するだけで済みます。