Переключение jQuery отключено/включено для парного ввода

У меня есть 2 парных поля ввода, и мне нужно переключаться между ними (если одно включено, другое должно быть отключено).

Я понятия не имею, как подойти к этому, есть идеи?


input html toggle jquery disabled-input
person mauzilla    schedule 31.08.2012    source источник
comment
как выбрать поле ввода? пожалуйста, предоставьте html   -  person diEcho    schedule 31.08.2012
comment
по какому событию будет включаться/отключаться   -  person rahul    schedule 31.08.2012
comment
@Mauritz Swanepoel смотрите мой код ниже..   -  person Berker Yüceer    schedule 31.08.2012

Ответы (3)


arrow_upward
3
arrow_downward

Пример: 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
});
person Richard de Wit    schedule 31.08.2012
comment
Привет @GeenHenk, спасибо за это. Это будет работать, но у меня нет кнопки переключения, у меня есть определенное время в моем сценарии, когда я включаю и выключаю их, поэтому мне нужен способ автоматического переключения, если другой из пары изменен (поэтому, если кто-то изменится, с другим сделай наоборот) - person mauzilla; 31.08.2012
comment
Затем используйте, например, focusin/out для включения/отключения другого элемента и наоборот. $("#item1").focusin(function() { $("#item2").prop("disabled", "disabled"); }); -- api.jquery.com/focusout - person Smamatti; 31.08.2012
comment
@MauritzSwanepoel, вы можете сделать это как function toggleDisable(), и когда в вашем коде произойдет отключение, вы также можете вызвать эту функцию. Я полагаю, что есть где-то, где один из двух отключается - person Richard de Wit; 31.08.2012

arrow_upward
0
arrow_downward

Я повозился с проблемой и придумал этот скрипт:

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") вашими потребностями.

person nuala    schedule 31.08.2012

arrow_upward
0
arrow_downward

это дает включенный ввод:

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

и, наконец, переключаться между двумя входами:

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

Просто как это. также следит за тем, чтобы был включен только истинный.

person Berker Yüceer    schedule 31.08.2012