如何将焦点设置在禁用的下拉列表中

问题描述：

禁用的属性正在动态添加到我的下拉列表中。如何在不删除禁用属性的情况下将焦点设置为下拉列表。是否可以设定焦点？设置焦点的目的是让屏幕阅读器阅读下拉列表，并让用户知道它是禁用的下拉菜单。如何将焦点设置在禁用的下拉列表中

我试过使用只读属性，但它在下拉列表上不起作用。下面是下拉列表中的HTML：

<select name="description" id="description" disabled="disabled" class="disabledSelection largeGroup"> 
    <option selected="selected" value="-1">Select One</option> 
    <option value="1">Montana</option> 
    <option value="2">Utah</option> 
</select>

我的另一个问题是，我的下拉列表中有3种选择，如何选择的依据一定条件之一删除的除了默认的选项2（如果下拉被禁止只显示默认值）。我正在使用下面的jQuery代码，但它不起作用。

$('#description').each(function() { 
    if ($(this).is('select')) { 
    $('option', this).not(':Selected').remove(); 
    } 
});

禁用的DOM元素不能拥有焦点。您最好的选择是在您的操作期间删除“禁用”属性。 – marekful

我不希望用户选择特定的下拉列表，除非他填写了其他一些细节。但是我想要展示UI中禁用的下拉菜单。如果我不禁用它，他将能够选择它。我怎样才能传达它在不使用禁用属性的情况下被禁用？ – raj

答

当disabled属性存在时，您无法执行任何操作。

但是，如果你在给定时间记录select状态（这option被选中），可以冻结它象下面这样：

$(document).ready(function(){ 
 

 
    var myotherCondition = false; 
 
    var selectedOptions = []; 
 

 
    // Get the selected indexes in an array. 
 
    for (i=0;i<$("select").length;i++){ 
 
    selectedOptions.push($("select").eq(i)[0].selectedIndex); 
 
    } 
 
    console.log(JSON.stringify(selectedOptions)); 
 

 
    $("select").on("change",function(){ 
 

 
    // If the other condition is fulfilled, this is a normal select behaviour. 
 
    if(myotherCondition){ 
 
     console.log("Change accepted."); 
 

 
     // If the other condition is NOT fulfilled, drop list opens... But changes don't stay. 
 
    }else{ 
 
     console.log("Change not accepted, sorry."); 
 

 
     var thisEQ = $(this).index();  
 
     $(this).find("option").prop("selected",false); 
 
     $(this).find("option").eq(selectedOptions[thisEQ]).prop("selected",true); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="description" id="description" class="disabledSelection largeGroup"> 
 
    <option selected="selected" value="-1">Select One</option> 
 
    <option value="1">Montana</option> 
 
    <option value="2">Utah</option> 
 
</select>

关于你的第二个问题，关于删除未选择选项，这个简单如下：

$(document).ready(function(){ 
 
    $('option').not(':selected').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="description" id="description" class="disabledSelection largeGroup"> 
 
    <option selected="selected" value="-1">Select One</option> 
 
    <option value="1">Montana</option> 
 
    <option value="2">Utah</option> 
 
</select>

太好了。有用。谢谢 – raj

答

晚会晚了，但我希望这仍然有帮助。您可以使用aria-disabled属性而不是disabled，并且您的元素将可以分配焦点（即使在IE和移动设备中，通常这个问题在Chrome或Edge中也不会增加）。作为一个方面说明，如果你还希望你的元素可以通过键盘TAB导航，当然要确保设置tabindex =“0”（但是这不是通过JavaScript以编程方式指定焦点所需要的）。

如何将焦点设置在禁用的下拉列表中

相关推荐