mardi 25 avril 2017

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

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

What i want to do is 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');
});

thanks in advanced!




Aucun commentaire:

Enregistrer un commentaire