2013-10-10 155 views
0

我有一個具有不同權限的用戶下拉菜單。用戶的不同權限是查看,編輯或刪除。從下拉菜單中選擇用戶時,複選框應根據其擁有的權限進行更新。我試過使用.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); 
    }); 

回答

2

.prop是設置複選框的正確方法。

您的活動未被觸發,因爲點擊事件未觸發。

嘗試.change,注意我調整了option s以使數據具有value屬性而不是class屬性。要麼確保默認選擇的選擇和默認複選框比賽(因爲他們在與USER1你的例子做)或手動觸發$('.select210').change()

你也可能需要設置.prop('disabled', true)如果要更改這些默認設置禁止用戶。

fiddle

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

必須設置onchange事件,而不是點擊,爲選擇輸入嘗試這種解決方案。

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

對其他人應用相同。

相關問題