如果選擇從一個組中的任何選項，然後在其他組中的所有選項應該開始使用多選自舉（optgroups）

我使用的引導多選（https://davidstutz.github.io/bootstrap-multiselect/）如果選擇從一個組中的任何選項，然後在其他組中的所有選項應該開始使用多選自舉（optgroups）

我有2組的下拉菜單中禁用。

在頂層組中選擇任何選項後，第二組中的所有項目都應禁用。

我應該能夠從第二組中選擇任何選項。

我的控制器綁定數據，列表按照縣分類分組。：

public void CHDSList() 
    {List<SelectList> CHDSListList = new List<SelectList>(); 
     ViewData["CHDSList"] = new SelectList((from s in objentity.tbl_CountiesMst.ToList().OrderBy(a => a.County_Code) 
           select new 
            { 
             County_Code = s.County_Code, 
             County_Name = s.County_Code +" - " + s.County_Name, 
             County_category = s.County_Category 
            }), "County_Code", "County_Name", "county_category", 1); 


    }

在視圖中，我有這個...

$('.listbox').multiselect({ 
     includeSelectAllOption: false, 
     buttonWidth: '100%', 
     maxHeight: 200, 
     enableClickableOptGroups: true }) 

@Html.ListBox("ChdListBox", (SelectList)(IEnumerable<SelectListItem>)ViewData["CHDSList"], 
     new { @class = "listbox", @style = "text-align:left; multiple=multiple; 
       width:100px;min-width:100%; height:30px; border-color:lightblue" })

multiselect dropdown image

來源

2017-03-07 Roopa

您可以使用多選的OPTGROUP的id屬性通過使用jQuery禁用組。不要忘記在禁用後刷新多選，如代碼片段所示。禁用後，如果你想選擇，那麼你必須啓用它。

請參閱此代碼段：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
     $('#multiselect').multiselect({ 
 
      onChange: function (option, checked, select) { 
 
       var groupId = $(option).closest('optgroup').prop('id') 
 
       if (groupId == "optgroup1") { 
 
        $('#multiselect optgroup#optgroup2').prop('disabled', true); 
 
        $('#multiselect').multiselect('refresh'); 
 
       } 
 
      } 
 
     }) 
 
    }); 
 
</script> 
 
</head> 
 
<body> 
 
<select id="multiselect" multiple="multiple"> 
 
     <optgroup label="Group 1" id="optgroup1"> 
 
      <option value="1">Option 1</option> 
 
      <option value="2">Option 2</option> 
 
      <option value="3">Option 3</option> 
 
     </optgroup> 
 
     <optgroup label="Group 2" id="optgroup2"> 
 
      <option value="4">Option 4</option> 
 
      <option value="5">Option 5</option> 
 
      <option value="6">Option 6</option> 
 
     </optgroup> 
 
    </select> 
 
</body> 
 
</html>

來源

2017-03-09 12:42:37 wanderer

如果選擇從一個組中的任何選項，然後在其他組中的所有選項應該開始使用多選自舉（optgroups）

回答

相關問題