Choosing an option to check/uncheck checkboxes not working?

Question

I have a dropdown of users with different permissions. The different permissions for the users are view, edit or delete. When choosing the user from the dropdown, the checkboxes should update according to which permissions they have. I've tried using .prop() and .attr() to no avail. http://jsfiddle.net/DWM4r/

HTML

              <select class='select210'>
                <option class='user1'>wjazi@deloitte.com</option>
                <option class='user2'>aschwem@company.com</option>
                <option class='user3'>tcooksnow@usa.com</option>
              </select>  
              <input type='checkbox' checked class='viewChk' />View
              <input type='checkbox' checked class='editChk' />Edit
              <input type='checkbox' checked class='delChk' />Delete

jQuery

     $('.user3').click(function() {
          $('.viewChk').attr('checked', true);
          $('.editChk').attr('checked', false);
      $('.delChk').attr('checked', false);
     });
     $('.user2').click(function() {
          $('.viewChk').prop('checked', true);
          $('.editChk').prop('checked', true);
          $('.delChk').prop('checked', false);
     });
     $('.user1').click(function() {
          $('.viewChk').prop('checked', true);
          $('.editChk').prop('checked', true);
          $('.delChk').prop('checked', true);
     });

Answer 1

.prop is the correct way to set the checkbox.

Your events are not being triggered because the click event doesn't fire.

Try .change, note I adjusted the options to have the data as the value attribute not the class attribute. Either make sure the default select selection and the default checkboxes match (as they do in your example with user1) or manually trigger $('.select210').change()

You might also want to set .prop('disabled', true) if you want to disallow users from changing these defaults.

fiddle

<select class='select210'>
  <option value='user1'>wjazi@deloitte.com</option>
  <option value='user2'>aschwem@company.com</option>
  <option value='user3'>tcooksnow@usa.com</option>
</select>  
<input type='checkbox' checked class='viewChk' />View
<input type='checkbox' checked class='editChk' />Edit
<input type='checkbox' checked class='delChk' />Delete

$('.select210').change(function(){
  var value= $(this).val();
  switch(value){
    case 'user1':
      $('.viewChk').prop('checked', true);
      $('.editChk').prop('checked', true);
      $('.delChk').prop('checked', true);
      break;
    case 'user2':
      $('.viewChk').prop('checked', true);
      $('.editChk').prop('checked', true);
      $('.delChk').prop('checked', false);
      break;
    case 'user3':
      $('.viewChk').prop('checked', true);
      $('.editChk').prop('checked', false);
      $('.delChk').prop('checked', false);
      break;
  }
});

Answer 2

Try this solution You have to set the onchange event instead of the click, for the select inputs.

$( ".user3" ).change(function() {
   $('.viewChk').prop('checked', true);
          $('.editChk').prop('checked', true);
          $('.delChk').prop('checked', false);
          $('.delChk').attr('checked', false);
});

Apply the same for the others.