В своём проекте использую библиотеку mdl, так уж вышло что в js я новичек. Вопрос заключается в следующем, как сделать так чтобы по событию на checkboxe становился активным выпадающий список вместе с классом "icon" приведённый ниже код не совсем корректно работает
<html>
<head>
<title>ШТАБ</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="mdl/material.min.css">
<link rel="stylesheet" href="mdl/getmdl-select.min.css">
<link rel="stylesheet" href="mdl/iconfont/material-icons.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myCheckbox').change(function () {
$('#myList').prop("disabled", !$("#myCheckbox").prop("checked"));
})
});
</script>
</head>
<BODY bgcolor=#a4a4a4>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="myCheckbox">
<input type="checkbox" id="myCheckbox" name="checklist" value=1 class="mdl-checkbox__input" /></label>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height" style="max-width: 210px;margin: auto;">
<input id="myList" disabled class="mdl-textfield__input" value="" readonly/>
<input value="" type="hidden" name="val"/>
<i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i> //класс который нужно сделать неактивным
<label class="mdl-textfield__label">Наименование ОП</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
<li class="mdl-menu__item" data-val="1" data-selected="true">текст1</li>
<li class="mdl-menu__item" data-val="2">текст2</li>
<li class="mdl-menu__item" data-val="3">текст3</li>
<li class="mdl-menu__item" data-val="4">текст4</li>
<li class="mdl-menu__item" data-val="5">текст</li>
</ul>
</div>
<script defer src="mdl/material.min.js"></script>
<script defer src="mdl/getmdl-select.min.js"></script>
</body>
</html>