禁用（灰显）父类别并使其不可选

Question

我有一个多选，我想禁用父类别被转移，我很长时间都在努力。

请看图片，我想用任何代码禁用黄色的（我使用的是wordpres）

我以某种方式工作并且在窗口加载时无法选择但是当选择子类别时，所有这些都再次启用，任何有关代码的帮助都不能选择 守则是：

         <script type="text/javascript">
window.onload =function () {
var fastInternet = document.getElementById("countrylist");
for (var i = 0; i < fastInternet.options.length; i++) {
    var value = fastInternet.options[i].value;
   if(value == '47' || value == '52'  || value == '57'   || value == '61' )  {
        //need to hide this
        fastInternet.options[i].setAttribute("disabled", "disabled");

    }

    }
  };
</script>

Answer 1

在不阅读代码的情况下，以下两种方法可以使<option>无法选择。

1. 使用<optgroup>

   <select>
     <optgroup label="Category 1">
       <option>Option 1</option>
       <option>Option 2</option>
     </optgroup>    
     <optgroup label="Category 2">
       <option>Option 3</option>
       <option>Option 4</option>
     </optgroup>
   </select>
   

   Documentation @ MDN

2. 如果你不能使用<optgroup> - 标签，那么只需禁用不应该选择的选项：

   <option disabled>an option</option>
   

<小时/> 您澄清说您需要使用JS，我将假设jQuery可用：

$("#myselect option").each(function(el) {
    if($(this).text().slice(0, 2) != "--") {
        $(this).attr('disabled', true);
    }
});

$("#myselect option:not([disabled])").first().attr("selected", "selected");

背后的逻辑是，我们检查每个<option>是否内部文本不以--开头。如果这是真的，则它是一个类别（根据您的屏幕截图），我们禁用此选项 最后要记住的是，我们之后需要选择一个非禁用选项，否则在网站加载时会自动选择一个类别。

请参阅fiddle。