Q:

Uncheck CheckBoxes with Javascript Not working

First thing, I searched SO and there are many questions with same title but none of them has the answer and I tried all of these answers with many different versions of my own but nothing works.
So, I have a form with many checkboxes and I want to uncheck all checkboxes when user change the user from userSelection list. like this
<form id="myForm">
    <select id="userSelection" onchange="userChange()">
        <option value="0" acl="">Select User</option>
        <option value="1" acl="2,5">ABC</option>
        <option value="2" acl="3,4">DEF</option>
    </select> 

    <label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
    <label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
    <label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
    <label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>

<script type="text/javascript">
  function checkUncheckFields(isAllCheck)
  {
     var cbarray = document.getElementsByName('chkAc');
     for(var i = 0; i < cbarray.length; i++)
     {
          isAllCheck == false? cbarray[i].checked=false : cbarray[i].checked = true;
     }
  }

  function userChange()
  {
     checkUncheckFields(false);
     var access = $("#userSelection option:selected").attr('acl').split(',');
     $('input[type=checkbox]').each(function()
     {
        if(access.indexOf($(this).attr('ac')) > -1)
        {
            $(this).attr('checked',true);
        }
     });
  }
</script>

Now when I go to my page, manually check all of these checkboxes and then change my user from userSelection list, it does not uncheck checkboxes and if does uncheck all checkboxes then It doesnot check checkboxes meeting condition in user change. I am using JQuery 1.11.0
I have made JSBin here Please check it http://jsbin.com/famehaguni/1/watch  plese first check all checkboxes and then change user. Then you can see in our userChange() function we have given the condition to check checkboxes with user's acl attibute values but it doesnot check them means when you select ABC user then it should check 2 and 5 Checkboxes and if you choose DEF user then it should check 3 and 4 checkboxes

A:

try using this:
// to set unchcked all check boxes with name=chkAc;

function checkUncheckFields()
  {
  $("[name=chkAc]").each(function(){
      $( this ).attr('checked', false);
    });
  
  }

  function userChange()
  {
  var access = $("#userSelection option:selected").attr('acl').split(',');
  checkUncheckFields();
  $("[name=chkAc]").each(function(){
  if($.inArray($(this).attr('ac'),access) >= 0)// your way of checking will also work.
        {
     
         $(this).prop('checked', true);
        }
  });
  
         
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" >
   <select id="userSelection" onchange="userChange()">
    <option value="0" acl="">Select User</option>
    <option value="1" acl="2,5">ABC</option>
    <option value="2" acl="3,4">DEF</option>
</select>
    <br/>
    <label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
    <label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
    <label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
    <label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>

