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>

我的另一个问题是我的下拉列表有3个选项，如何根据某些条件删除除默认选择的选项之外的2个选项（如果禁用下拉列表仅显示默认值）。我使用下面的jQuery代码，但它无法正常工作。

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

Answer 1

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

但是，如果您在给定时间记录select个州（选择了option），您可以将其冻结如下：

＆＃13;

$(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);
    }
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如前所述，您不能为此使用“禁用”属性。但是，无需存储先前的值即可轻松完成此操作。

此代码段将禁止单击下拉列表，并防止通过按键进行更改，同时仍允许用户签入和签出。

// Set aria-disabled to true in order to signify to screen readers that the control is unavailable
$('#description').attr('aria-disabled', 'true');
// Disable clicking on the control
$("#description").on('mousedown', function (e) {
    e.preventDefault();
});
// Disable changing the value via keyboard
$("#description").on('keydown', function (e) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    // Only disable if the keycode is not TAB
    if (keycode != 9)
        e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="description" id="description">
  <option selected="selected" value="-1">Select One</option>
  <option value="1">Montana</option>
  <option value="2">Utah</option>
</select>

对于问题的第二部分，从特定下拉列表中删除除选定选项之外的所有选项的正确方法是：

$('#description').find('option').not(':selected').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="description" id="description">
  <option selected="selected" value="-1">Select One</option>
  <option value="1">Montana</option>
  <option value="2">Utah</option>
</select>

Answer 3

晚会，但我希望这仍然有用。您可以使用aria-disabled属性而非disabled，并且您的元素将能够被指定为焦点（即使在IE和移动设备中，通常此问题也不会在Chrome或Edge中出现。）

作为旁注，如果您还希望您的元素可以使用键盘TAB导航，当然一定要设置tabindex =“0”（但是不需要通过JavaScript以编程方式分配焦点）。

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

3 个答案: