CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Terence
Terence

Reputation: 352

jquery disable textbox using checkbox (multiple textbox with checkbox)

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:

enter image description here

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');
});

Upvotes: 2

Views: 1837

Answers (2)

Jins Peter
Jins Peter

Reputation: 2469

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');
});

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150020

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.

Upvotes: 5

Related Questions