Habilitar select dinâmico quando opção for selecionada

Boa tarde!

Eu tenho um select para categoria e um para subcategoria. O select de subcategoria só exibe as subcategorias se categoria for selecionado. Eu qria que enquanto categoria não for selecionado, o select subcategoria fique desabilitado ou com readonly="true".

AJAX:

function buscar_subcategoria(idcategoria){
 $.post(base_url+"/index.php/subcategoria/subcategoria_controller/ajax_dados_subcategoria", {
 idcategoria : idcategoria
 }, function(data){
 $('#subcategoria').html(data);
 });
 }

HTML:

 <div class="form-group">
 <label for="categoria">Categoria</label>
 <select class="form-control" name="categoria_fk" id="categoria_fk" required="required" onchange='buscar_subcategoria($(this).val())'>

 <option value="">Selecione uma categoria</option>
 <!--AQUI!-->
 <?php foreach ($categoria -> result() as $linha): ?>

 <option value="<?php echo $linha->idcategoria?>"><?php echo $linha->nomecategoria?></option>

 <?php endforeach;?>

 </select>
 </div>

 <div class="form-group">
 <label for="exampleSelect1">Subcategoria</label>
 <select class="form-control" name="subcategoria_fk" id="subcategoria">
 <option value="">Selecione uma categoria</option>
 <!--AQUI!-->
 <?php foreach ($subcategoria -> result() as $linha): ?>

 <option value="<?php echo $linha->idsubcategoria?>"><?php echo $linha->nomesubcategoria?></option>

 <?php endforeach;?>
 </select>
 </div>

PHP:

 function ajax_dados_subcategoria($idcategoria){

 $this->load->model('subcategoria/subcategoria_model');

 $dados = $this->subcategoria_model->m_ajax_dados_subcategoria($idcategoria);

 $option = "<option value=''></option>";
 foreach($dados -> result() as $linha) {
 $option .= "<option value='$linha->idsubcategoria'>$linha->nomesubcategoria</option>";
 }

 echo $option;

 }