I have a function to handle change in the drop-down list as:
$('#dropDownChoice').change(function () {
debugger;
var choice= $('#dropDownChoice option:selected').text();
//code to display elements: the divisions that contain the checkboxes
});
$(".chkBox").change(function () {
debugger;
if (this.checked) {
$("." + this.className).not(this).prop("disabled", true);
$(this).closest('div').find(".save").show();
$(this).closest('div').find(':input[type="number"]').prop('disabled', false);
}
else {
//opposite of that in if - block
}
});
And the check boxes (6 in number) declared as:
<input type="checkbox" class="chkBox" >
Now, when I check a checkbox, all the associated fields are displayed, and those for other are disabled.
My problem is, when the drop down changes, i.e. another option is chosen, I still get the previously selected checkbox along with the associated fields enabled, and all other check boxes invisible.
I tried using:
$('.chkBox').show();
$('.chkBox').removeAttr('checked');
And also a custom function, which I called from inside the $('#dropDownChoice').change(function (){}
But this doesn't work.
function ResetChkBox() {
$('.chkBox').prop('checked', false);
$(this).closest('div').find(".save").hide();
}
Aucun commentaire:
Enregistrer un commentaire