Проблема с плагином jQUI selectmenu

678

03 февраля 2017, 03:45

Такая ситуация: если применить плагин к выпадающему списку - selectmenu(), то переключатели начинают работать некорректно. Например если выбрать "Закрыть" то список больше не откроется. Таких проблем нет если отключить selectmenu().

$(document).ready(function(){ 
         
    $(':radio').click(function(){ 
        if($(this).val()=="nedzen"){  
            $('select').prop('disabled',true); 
        } 
        else 
            $('select').prop('disabled',false); 
    }); 
     
    $('select').selectmenu(); 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<select name="theme" class="op1"> 
     <option value="ox" >Выбор 1</option> 
     <option value="light">Выбор 2</option> 
     <option value="dark">Выбор 3</option> 
</select> 
 
<input name="dz"  id="dzen" type="radio" value="dzen"> 
<label for="dzen" >Открыть</label> 
<input name="dz" id="nedzen" type="radio" value="nedzen"> 
<label for="nedzen">Закрыть</label>

Answer 1

Вызов $('select').selectmenu(); прячет родной элемент select и создает новые элементы. Используйте:

$("select").selectmenu("disable");
$("select").selectmenu("enable");

http://api.jqueryui.com/selectmenu/#method-disable

$(document).ready(function(){ 
         
    $(':radio').click(function(){ 
        if($(this).val()=="nedzen"){  
            $('select').selectmenu('disable'); 
        } 
        else 
            $('select').selectmenu('enable'); 
    }); 
     
    $('select').selectmenu(); 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<select name="theme" class="op1"> 
     <option value="ox" >Выбор 1</option> 
     <option value="light">Выбор 2</option> 
     <option value="dark">Выбор 3</option> 
</select> 
 
<input name="dz"  id="dzen" type="radio" value="dzen"> 
<label for="dzen" >Открыть</label> 
<input name="dz" id="nedzen" type="radio" value="nedzen"> 
<label for="nedzen">Закрыть</label>