Choisir une option pour cocher/décocher les cases qui ne fonctionnent pas?

Question

J'ai une liste déroulante d'utilisateurs avec des autorisations différentes. Les différentes autorisations pour les utilisateurs sont vue, éditer ou supprimer. Lorsque vous choisissez l'utilisateur dans la liste déroulante, les cases à cocher doivent être mises à jour en fonction des autorisations dont ils disposent. J'ai essayé d'utiliser .prop() et .attr() en vain. 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 est la bonne façon de régler la case à cocher.

Vos événements ne sont pas déclenchés car l'événement click ne se déclenche pas.

Essayez .change, note I ajusté les option s d'avoir les données que l'attribut value pas l'attribut class. Soit assurez-vous que la valeur par défaut, sélectionnez la sélection et les cases par défaut de match (comme dans votre exemple avec user1) ou déclencher manuellement $('.select210').change()

Vous pouvez également définir .prop('disabled', true) si vous voulez interdire les utilisateurs de modifier ces valeurs par défaut.

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

Essayez cette solution Vous devez définir l'événement onchange au lieu du clic, pour les entrées de sélection.

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

Appliquer la même chose pour les autres.