jquery disable textbox using checkbox (multiple textbox with checkbox)

Question

I am trying to disable a textbox whenever a user checks the checkbox.

I've done it with a single textbox and checkbox.

I am now stuck what if user can add multiple textbox with checkbox?

Here is what my output looks so far:

My output has that whenever I tick on the checkbox the disabled attr just toggles on one textbox to another.

I want that when a checkbox was checked the textbox still remains disabled until I uncheck its respective checkbox.

Here is what I coded so far.

HTML

<div id="operator_properties">
    <label for="operator_title">Operator's title:  </label> <input type="text" id="operator_title">
    <br /><br />
    <button id="append" class="btn btn-primary">Add Connectors</button>
    <br /><br />
    <div class="col-md-10">
        <div id="parent"></div>
    </div>
    <div class="clearfix"></div>
    <hr />
    <div class="col-md-12">
        <button class="btn btn-success" id="operator_btn">
            Confirm
        </button>
    </div>
    <div class="clearfix"></div>
</div>

Jquery

$(function () {
    var count = 1;
    $('#append').click(function () {
        $('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>');
        count++;
    });
});

$(document).on('click', '.remove', function () {
    $(this).closest("div.operator").remove();
});

$(document).on('change', '.disable-input', function () {
    $("#parent").find("input.input-text").attr("disabled", false);
    if ($(this).is(":checked"))
        $(this).parent().find("input.input-text").attr("disabled", true);
    //console.log('working');
});

nnnnnn · Accepted Answer · 2017-04-25 07:59:28Z

5

Remove the following line:

$("#parent").find("input.input-text").attr("disabled", false);

...because that's enabling all inputs within the #parent element.

You already seem to know how to use $(this).parent(...).find(...) to get the textbox related to the clicked item, so just modify that code:

$(document).on('change', '.disable-input', function () {
    $(this).parent().find("input.input-text").prop("disabled", this.checked);
});

Note that you can simply use this.checked rather than $(this).is(":checked")) - more efficient and easier to read. Also, use .prop() rather than .attr() for these sort of dynamic state changes.

answered Apr 25, 2017 at 7:59

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Douwe de Haan Over a year ago

You could even switch the .parent().find("input.input-text") with .siblings("input.input-text"), because it is on the same level (see documentation here)

nnnnnn Over a year ago

@DouwedeHaan - True. But I actually prefer .closest(...).find(...), rather than .parent().find(...) or .siblings(), because that way if you decide to modify the HTML to add extra wrapper elements around either element (or move either one inside its label) the JS will continue to work without modification.

Douwe de Haan Over a year ago

I agree! I think you should even change your answer to that, because that would be more solid!

Jins Peter · Accepted Answer · 2017-04-25 08:11:43Z

try this, You were enabling all by setting disabled = false

$(function () {
    var count = 1;
    $('#append').click(function () {
        $('#parent').append('<div class="operator"> <div class="row"> <div class="col-md-2"><input type="text" id="input' + count + '" class="input-text" placeholder="Input' + count + ' title"><br /> <input type="checkbox" id="disableinput' + count + '" class="disable-input" /><label for="disableinput' + count + '" style="vertical-align: middle;"> &nbsp; Disable</label> </div> &nbsp <div class="col-md-3"><input type="text" id="output' + count + '" class="output-text" placeholder="Output' + count + ' title"> <a href="#" id="' + count + '" class="remove">Remove</a> <br /> <input type="checkbox" id="disableoutput' + count + '" class="disable-output" /><label for="disableoutput' + count + '"style="vertical-align: middle;"> &nbsp; Disable</label></div></div></div>');
        count++;
    });
});

$(document).on('click', '.remove', function () {
    $(this).closest("div.operator").remove();
});

$(document).on('change', '.disable-input', function () {

    //$("#parent").find("input.input-text").attr("disabled", false);
    if ($(this).is(":checked"))
    {
        $(this).parent().find("input.input-text").attr("disabled", true);
    }
    else if($(this).not(":checked")){
        $(this).parent().find("input.input-text").attr("disabled", false);
    }
    //console.log('working');
});

Collectives™ on Stack Overflow

jquery disable textbox using checkbox (multiple textbox with checkbox)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related