Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Выбор опции для установки/снятия флажков не работает?

Автор вопроса: triplethreat77Ответов: 2

У меня есть выпадающий список пользователей с разными разрешениями. Различные разрешения для пользователей: просмотр, редактирование или удаление. При выборе пользователя из раскрывающегося списка флажки должны обновляться в соответствии с имеющимися у него разрешениями. Я пытался использовать .prop() и .attr() безрезультатно. http://jsfiddle.net/DWM4r/

HTML

              <select class='select210'>
                <option class='user1'>[email protected]</option>
                <option class='user2'>[email protected]</option>
                <option class='user3'>[email protected]</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);
     });

javascriptcheckboxjquerypropattr

Ответы

Ответ 1 · рейтинг 2 · Plato

.prop - это правильный способ установки флажка.

Ваши события не запускаются, потому что событие щелчка не срабатывает.

Попробуйте .change, обратите внимание, что я настроил option, чтобы данные были атрибутом value, а не атрибутом class. Либо убедитесь, что выбранный по умолчанию выбор и флажки по умолчанию совпадают (как в вашем примере с user1), либо вручную активируйте $('.select210').change()

Вы также можете установить .prop('disabled', true), если хотите запретить пользователям изменять эти значения по умолчанию.

скрипка

<select class='select210'>
  <option value='user1'>[email protected]</option>
  <option value='user2'>[email protected]</option>
  <option value='user3'>[email protected]</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;
  }
});

Ответ 2 · Juan Garcia

Попробуйте это решение. Вы должны установить событие onchange вместо щелчка для выбранных входов.

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

Примените то же самое для других.

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы