jQuery toggling disabled / enabled on a paired input

Question

I have 2 paired input fields, and need to toggle enabled/disabled between them (if one is enabled the other should be disabled).

I have no idea how to approach this, any ideas?

how to select an input field ? plz provide the html – xkeshav Aug 31 '12 at 11:01 — xkeshav, Aug 31 '12 at 11:01
on which event one is going to enable/disable – rahul Aug 31 '12 at 11:02 — rahul, Aug 31 '12 at 11:02
@Mauritz Swanepoel see my code below.. – Berker Yüceer Aug 31 '12 at 12:05 — Berker Yüceer, Aug 31 '12 at 12:05

Richard de Wit · Accepted Answer · 2014-10-15T12:25:36.923

3

Example: the item1 is enabled, the item2 is disabled

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

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

This will toggle the items when some kind of switch is clicked. Use it on whatever toggles it, i.e. the button above:

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

If you really want to make sure they're opposites;

$("#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
});

edited Oct 15 '14 at 12:25

answered Aug 31 '12 at 11:05

Richard de Wit

7,102
7
44
54

Hey @GeenHenk, thanks for this. This would work but I do not have a toggle button, I have specific times within my script I turn them on and off, so I need a way to toggle it automatically if the other one of the pair is changed (so if anyone changes, do the opposite on the other one) – mauzilla Aug 31 '12 at 11:09
Then use for example focusin/out to enable/disable the other element and vice versa. `$("#item1").focusin(function() { $("#item2").prop("disabled", "disabled"); });` -- http://api.jquery.com/focusout/ – Smamatti Aug 31 '12 at 11:10
@MauritzSwanepoel, you can make this in like `function toggleDisable()` and when the disabling occurs in your code, you can then call to this function as well. I suppose there is *somewhere* where one of the 2 gets disabled – Richard de Wit Aug 31 '12 at 11:13

Berker Yüceer · Answer 2 · 2012-08-31T15:16:03.227

this gives the enabled input:

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

this toggles the disable for all inputs but checkbox:

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

and at last toggle between two input:

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

Simple as this. also makes sure that only the true one enabled.

score 0 · Answer 3 · answered Aug 31 '12 at 12:24

I fiddled around the problem and came up with this script:

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
}

If you want another event the cause for the toggle you only have to exchange $("#toggleFields").on("click") with your needs.

jQuery toggling disabled / enabled on a paired input

3 Answers3