html选择不可点击

Question

我在语法中将<select>转换为更有棱角的2。我使用的是Angular 2，但是我使用Jquery作为我的<select _ngcontent-iwn-11="" class="form-control ng-untouched ng-pristine ng-valid" id="find-category-select" multiple="" name="categories" required="" disabled="" ng-reflect-required="" ng-reflect-name="categories" ng-reflect-model=""> <!--template bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object]" }--><optgroup _ngcontent-iwn-11="" ng-reflect-label="grocery products" label="grocery products" style=" width: 400px; height: 100px; "> <!--template bindings={ "ng-reflect-ng-for-of": "meat,dairy,confectionary,dessert,baking,condiments,beverages,Dr IQ,Magma,Tornado" }--><option _ngcontent-iwn-11=""> meat </option><option _ngcontent-iwn-11=""> dairy </option><option _ngcontent-iwn-11="" style=" height: 100px; width: 400px; "> confectionary </option><option _ngcontent-iwn-11=""> dessert </option><option _ngcontent-iwn-11=""> baking </option><option _ngcontent-iwn-11=""> condiments </option><option _ngcontent-iwn-11=""> beverages </option><option _ngcontent-iwn-11=""> Dr IQ </option><option _ngcontent-iwn-11=""> Magma </option><option _ngcontent-iwn-11=""> Tornado </option> </optgroup><optgroup _ngcontent-iwn-11="" ng-reflect-label="meals" label="meals"> <!--template bindings={ "ng-reflect-ng-for-of": "African,American,Argentine,Asian,Asian Fusion,BBQ,Bakery,Beverages,Brazilian,Breakfast,British,Cafe,Cambodian,Chinese,Coffee and Tea,Contemporary,Continental,Deli,Desserts,Drinks Only,European,Fijian,Filipino,Finger Food,Fish and Chips,French Fusion,German,Greek,Grill,Healthy Food,Ice Cream,Indian,Indonesian,International,Irish,Italian,Japanese,Jewish,Juices,Kiwi,Korean,Latin,American,Lebanese,Malaysian,Mediterranean,Mexican,Middle Eastern,Mongolian,Moroccan,Nepalese,North Indian,Pacific,Persian,Pizza,Portuguese,Pub Food,Seafood,Singaporean,South Indian,Spanish,Sri Lankan,Steakhouse,Street Food,Sushi,Taiwanese,Thai,Turkish,Vietnamese" }--><option _ngcontent-iwn-11=""> African </option><option _ngcontent-iwn-11=""> American </option><option _ngcontent-iwn-11=""> Argentine </option><option _ngcontent-iwn-11=""> Asian </option><option _ngcontent-iwn-11=""> Asian Fusion </option><option _ngcontent-iwn-11=""> BBQ </option><option _ngcontent-iwn-11=""> Bakery </option><option _ngcontent-iwn-11=""> Beverages </option><option _ngcontent-iwn-11=""> Brazilian </option><option _ngcontent-iwn-11=""> Breakfast </option><option _ngcontent-iwn-11=""> British </option><option _ngcontent-iwn-11=""> Cafe </option><option _ngcontent-iwn-11=""> Cambodian </option><option _ngcontent-iwn-11=""> Chinese </option><option _ngcontent-iwn-11=""> Coffee and Tea </option><option _ngcontent-iwn-11=""> Contemporary </option><option _ngcontent-iwn-11=""> Continental </option><option _ngcontent-iwn-11=""> Deli </option><option _ngcontent-iwn-11=""> Desserts </option><option _ngcontent-iwn-11=""> Drinks Only </option><option _ngcontent-iwn-11=""> European </option><option _ngcontent-iwn-11=""> Fijian </option><option _ngcontent-iwn-11=""> Filipino </option><option _ngcontent-iwn-11=""> Finger Food </option><option _ngcontent-iwn-11=""> Fish and Chips </option><option _ngcontent-iwn-11=""> French Fusion </option><option _ngcontent-iwn-11=""> German </option><option _ngcontent-iwn-11=""> Greek </option><option _ngcontent-iwn-11=""> Grill </option><option _ngcontent-iwn-11=""> Healthy Food </option><option _ngcontent-iwn-11=""> Ice Cream </option><option _ngcontent-iwn-11=""> Indian </option><option _ngcontent-iwn-11=""> Indonesian </option><option _ngcontent-iwn-11=""> International </option><option _ngcontent-iwn-11=""> Irish </option><option _ngcontent-iwn-11=""> Italian </option><option _ngcontent-iwn-11=""> Japanese </option><option _ngcontent-iwn-11=""> Jewish </option><option _ngcontent-iwn-11=""> Juices </option><option _ngcontent-iwn-11=""> Kiwi </option><option _ngcontent-iwn-11=""> Korean </option><option _ngcontent-iwn-11=""> Latin </option><option _ngcontent-iwn-11=""> American </option><option _ngcontent-iwn-11=""> Lebanese </option><option _ngcontent-iwn-11=""> Malaysian </option><option _ngcontent-iwn-11=""> Mediterranean </option><option _ngcontent-iwn-11=""> Mexican </option><option _ngcontent-iwn-11=""> Middle Eastern </option><option _ngcontent-iwn-11=""> Mongolian </option><option _ngcontent-iwn-11=""> Moroccan </option><option _ngcontent-iwn-11=""> Nepalese </option><option _ngcontent-iwn-11=""> North Indian </option><option _ngcontent-iwn-11=""> Pacific </option><option _ngcontent-iwn-11=""> Persian </option><option _ngcontent-iwn-11=""> Pizza </option><option _ngcontent-iwn-11=""> Portuguese </option><option _ngcontent-iwn-11=""> Pub Food </option><option _ngcontent-iwn-11=""> Seafood </option><option _ngcontent-iwn-11=""> Singaporean </option><option _ngcontent-iwn-11=""> South Indian </option><option _ngcontent-iwn-11=""> Spanish </option><option _ngcontent-iwn-11=""> Sri Lankan </option><option _ngcontent-iwn-11=""> Steakhouse </option><option _ngcontent-iwn-11=""> Street Food </option><option _ngcontent-iwn-11=""> Sushi </option><option _ngcontent-iwn-11=""> Taiwanese </option><option _ngcontent-iwn-11=""> Thai </option><option _ngcontent-iwn-11=""> Turkish </option><option _ngcontent-iwn-11=""> Vietnamese </option> </optgroup> </select> 这是不好的做法，但它有效。现在点击它不会发生任何事情（不会出现下拉列表）。是否可以通过查看输出html来了解为什么没有发生？

HTML：

<select  id="find-category-select"  
         class="form-control" 
         multiple required
         [(ngModel)]="selectedCategories"
         name="categories"
         #multiselect>


   <optgroup *ngFor="let category of categories" label="{{category.name}}">
     <option *ngFor="let subcategory of category.subCategories">
       {{subcategory}}
     </option>
   </optgroup>


</select>
<div id="icon" class="form-item-right-icon"></div>

我的实际角度2模板是：

(<any>$("#find-category-select")).multiselect({
    buttonWidth: '100%',
    buttonContainer: '<div style="height: 34px;" />',
    buttonClass: 'none',
    nonSelectedText: "select categories",
    nSelectedText: ' categories',
    allSelectedText: "all categories",
    selectAllNumber: false,
    onDropdownShown: function () {
        $('ul .caret-container').click();
    },
    onDropdownHidden: function () {
        $('ul .caret-container').click();
    },
    maxHeight: 400,
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true,
    includeSelectAllOption: false,
    disableIfEmpty: true,
    onSelectAll: () => {
        this.changed();
    },
    onChange: (option: any, checked: any) => {
        this.changed();
    }
});

在我的afterViewInit中，我将select为bootstrap multiselect插件，如下所示：

{{1}}

Answer 1

删除disabled=""

与disabled="true"或disabled相同。仅删除该属性才能启用该元素。

另见

• What does it mean in HTML 5 when an attribute is a boolean attribute?
• Correct value for disabled attribute