在具体化下拉选择中切换禁用属性？

Question

我想在物化中默认 select 为禁用。

<form>
 <select id="mySelect" required disabled>
  <option>Cats</option>
  <option>Dogs</option>
 </select>
</form>

<button id="try" >Try it</button>

Jquery:

$('#try').click(function(){
 $('#mySelect').prop("disabled", false);
};

在开发工具中它显示当点击尝试按钮时禁用的属性在 select 上被移除。但是，下拉菜单将不起作用。我相信这是具体化的东西，因为它似乎在我的 select 之上动态生成一个样式化的无序列表。它将残疾人添加到这个新生成的列表中，我也将其删除。

Answer 1

要让 select 与 Materializecss 一起工作，您必须将以下 js 行添加到您的 script :

$(document).ready(function() {
   $('select').material_select();
});

并确保它在启用 select 后正常工作，按如下方式编辑您的 js 函数：

 $('#try').click(function(){
   $('#mySelect').prop("disabled", false);
   $('select').material_select();
});

Answer 2

要更新select，您需要重新初始化

$('#try').click(function(){
    $('#mySelect').prop("disabled", false);
    var elems = document.querySelectorAll('#mySelect');
    var instances = M.FormSelect.init(elems);
};

在具体化下拉选择中切换禁用属性？

Toggle disabled property on materialize dropdown selection?

html

jquery

materialize

在具体化下拉选择中切换禁用 属性？

Toggle disabled property on materialize dropdown selection?

html

jquery

materialize

在具体化下拉选择中切换禁用属性？