JavasScript:如何防止用户在不使用禁用/指针事件的情况下选择选择选项列表中的任何内容

JavasScript: how do I prevent a user from selecting anything in a select option list without using disable/pointer-events?

本文关键字：选择 情况下 事件 选项 任何内 列表 指针 何防止 用户 JavasScript      更新时间：2023-09-26

我试图阻止用户选择所选值以外的任何其他值。 因为我的公司很老，很弱，他们使用IE9，而我使用的是MVC3/c#。 因此，我希望视图将预选值发送回控制器，并防止用户更改该值。 我已经尝试过"/pointer_events_polyfill.js"，但它不适用于让IE9使用"指针事件"。 

<select id="abc">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

是否有一个 javascript 函数或类可以用来防止用户更改预选值？

有很多方法可以解决这个问题。从可用性的角度来看，最好只向用户显示预选值，而不是尝试将其表示为输入。输入告诉用户他们可以选择，而你基本上是说你已经为他们选择了。其他选项包括：

  • 从select中删除除所需option以外的所有。

    $('#abc option[value="saab"]').siblings().remove();

  • 禁用select 。

  • 响应 change 事件，并在用户每次更改 select 的值时将其设置回其动态计算的值。

    $('#abc').change(function() {$(this).val('saab');});

但是，无论您决定如何向用户表示这一点，您都不能依赖客户端代码来强制他们的选择。提交表单后，您的服务器需要根据用户所做的其他选择计算所需的值。否则，精明的用户将能够破解提交的值。

你只需要将disabled属性设置为你的选择： 

 <select id="abc" disabled>
    <option value="volvo">Volvo</option>
    <option value="saab" selected>Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

参见：http://jsbin.com/vozeyajiseco/1/edit

相关文章：