How to disable dropdown input

Question

I'm trying to disable input and choice from an existing dropdown menu field. I want to make it load already chosen selections from the menu without giving the user the opportunity to change them in any way. That's the code I have:

HTML:

<select data-chosen-width="100%" multiple="multiple" data-chosen-disable-search="" data-placeholder="Choose categories" name="project_category" id="project_category" class="chosen multi-tax-item tax-item required cat_profile" style="display: none;">
    <option class=" administrativno cat-115 level-0" value="115">Административно право</option>
    <option class=" veshtno cat-120 level-0" value="120">Вещно право</option>
    <option class=" danachno cat-127 level-0" value="127" selected="selected">Данъчно право</option>
    <option class=" mpp cat-125 level-0" value="125">Международно публично право</option>
    <option class=" mchp cat-126 level-0" value="126">Международно частно право</option>
    <option class=" nakazatelno cat-117 level-0" value="117">Наказателно право</option>
    <option class=" obligatsionno cat-121 level-0" value="121" selected="selected">Облигационно право</option>
    <option class=" osiguritelno cat-124 level-0" value="124" selected="selected">Осигурително право</option>
    <option class=" pravo-na-es cat-128 level-0" value="128">Право на Европейския съюз</option>
    <option class=" pris cat-123 level-0" value="123">Право на интелектуалната собственост</option>
    <option class=" semeino-nasledstveno cat-119 level-0" value="119">Семейно и наследствено право</option>
    <option class=" trudovo cat-116 level-0" value="116">Трудово право</option>
    <option class=" targovsko cat-122 level-0" value="122">Търговско право</option>
    <option class=" finansovo cat-118 level-0" value="118">Финансово право</option>
</select>

<div class="chosen-container chosen-container-multi" style="width: 350px;" title="" id="project_category_chosen">
  <ul class="chosen-choices">
    <li class="search-choice">
      <span>Данъчно право</span>
      <a class="search-choice-close" data-option-array-index="2"></a>
    </li>
    <li class="search-choice">
      <span>Облигационно право</span>
      <a class="search-choice-close" data-option-array-index="6"></a>
    </li>
    <li class="search-choice">
      <span>Осигурително право</span>
      <a class="search-choice-close" data-option-array-index="7"></a>
    </li>
    <li class="search-field">
      <input value="Choose categories" class="valid" autocomplete="off" style="width: 25px;" type="text">
    </li>
  </ul>
  <div class="chosen-drop">
    <ul class="chosen-results"></ul>
  </div>
</div>

PHP:

$cate_arr = array();

if(!empty($profile->tax_input['project_category'])){
    foreach ($profile->tax_input['project_category'] as $key => $value) {
        $cate_arr[] = $value->term_id;
    };
}

ae_tax_dropdown(
    'project_category',
    array(
        'attr'            => 'data-chosen-width="100%" multiple="multiple" data-chosen-disable-search="" data-placeholder="'.__("Choose categories", ET_DOMAIN).'"',
        'class'           => 'chosen multi-tax-item tax-item required cat_profile',
        'hide_empty'      => false,
        'hierarchical'    => true ,
        'id'              => 'project_category' ,
        'selected'        => $cate_arr,
        'show_option_all' => false
    )
);

I've tried adding some code samples I found on the web, but nothing has actually worked so far. Will be glad if you come up with some ideas or solutions. Thanks.

Answer 1

I've solved this by adding disabled="true" to the 'attr' of ae_tax_dropdown', so it now looks like this:

'attr'            => 'data-chosen-width="100%" multiple="multiple" data-chosen-disable-search="" data-placeholder="'.__("Choose categories", ET_DOMAIN).'" disabled="true"'