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.
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;"> Disable</label> </div>   <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;"> 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