mardi 25 octobre 2016

How to uncheck all checkboxes belonging to the same class on change in a drop down?

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