【问题标题】：Choosing an option to check/uncheck checkboxes not working?选择一个选项来选中/取消选中复选框不起作用？
【发布时间】：2013-10-10 15:59:37
【问题描述】：

我有一个具有不同权限的用户的下拉列表。用户的不同权限是查看、编辑或删除。从下拉列表中选择用户时，复选框应根据他们拥有的权限进行更新。我试过使用 .prop() 和 .attr() 无济于事。 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);
     });

【问题讨论】：

标签： javascript jquery checkbox attr prop

【解决方案1】：

.prop 是设置复选框的正确方法。

您的事件没有被触发，因为点击事件没有触发。

尝试.change，注意我调整了options 以将数据作为value 属性而不是class 属性。确保默认选择选择和默认复选框匹配（就像在您的示例中与 user1 一样）或手动触发 $('.select210').change()

如果您想禁止用户更改这些默认值，您可能还需要设置 .prop('disabled', true)。

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;
  }
});

【讨论】：

【解决方案2】：

试试这个解决方案您必须为选择输入设置 onchange 事件而不是单击。

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

对其他应用相同。

【讨论】：