無効なドロップダウンリストにフォーカスを設定する方法

Question

無効な属性がドロップダウンリストに動的に追加されています。無効な属性を削除せずにドロップダウンリストにフォーカスを設定するにはどうすればよいですか。フォーカスを設定することは可能ですか？フォーカスを設定する目的は、スクリーンリーダーがドロップダウンリストを読み取って、ドロップダウンリストが無効であることをユーザーに知らせることです。

読み取り専用属性を使用しようとしましたが、ドロップダウンリストでは機能しません。以下は、ドロップダウンのための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> 

特定の条件に基づいて、1を選択した方法をデフォルト以外のオプションの2を除去するために私の他の質問私のドロップダウンリストには、3つのオプションを持っているされ、（ドロップダウンが無効のショーである場合にのみ、デフォルト値）。私は以下のjQueryコードを使用していますが、動作しません。

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

Answer 1

disabled属性がある場合は何もできません。

しかし、あなたが特定の時間に（optionが選択されている）selectの状態を記録している場合、あなたは以下のようにそれを凍結することができます：選択されていない取り外しのあなたの2番目の質問について

$(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>

Answer 2

パーティーに遅れていますが、これがまだ助けてくれることを願っています。 disabledの代わりにaria-disabled属性を使用できます。要素にフォーカスを割り当てることができます（IEやモバイルでも、通常この問題はChromeやEdgeでは発生しません）。

また、キーボードTABで要素をナビゲートできるようにするには、tabindex = "0"を設定するようにしてください（ただし、プログラムでJavaScript経由でフォーカスを割り当てる必要はありません）。