Question

我有一个大表单，其中包含很多字段，包括一些选择选项。我想阻止用户在不使用“禁用”的情况下更改选择选项。因为禁用不包括POST请求中的字段。

我用javascript尝试了以下内容：

field.readonly = true;

但我发现readonly不能像选择那样使用文本输入。那么我怎么能阻止用户改变选择值。请记住，我想使用表单帖子发布select值。

Answer 1

您只需在select标记中使用css属性pointer-events: none;即可。它可以防止在下拉列表中触发任何点击，以便下拉列表无法正常工作，您也可以在表单提交中获取下拉列表的值。

＆＃13;

.disabledByMe{
  pointer-events: none;
}

＆＃13;

<select name="test" class="disabledByMe">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

Answer 2

您可以通过键盘和鼠标操作使用preventDefault()和return false;。

<select onkeydown="event.preventDefault(); return false;" onmousedown="event.preventDefault(); return false;">
    <option>A</option>
    <option>B</option>
</select>

或者，我通常做的是制作我不想禁用的内容，获取postdata，然后将它们设置为禁用。

var $disabled = $('#form").find(':disabled');
$disabled.prop('disabled', false);

var postdata = $('#form').serialize();
$disabled.prop('disabled', true);

$.post('/file.php', postdata, function(data) {});

Answer 3

不确定你是否意味着一旦<select>变更或者以这种方式开始就让它变得不可改变。我假设前者（只更换一次？）但如果是后者，这是一个简单的修改，让我知道你是否有问题。本演示执行以下操作：

用户使用{}后禁用<select>。
将<select>值分配给<input type='hidden'>值。
<input type='hidden'>已分配[name= X ]; X = select.name或X = select.id
表单设置为将数据发送到live test server。响应被重定向到<iframe>。
如果成功，则回复应指明key/value对，${nameOfSelect/HiddenInput}:{valueOfSelect/HiddenInput}

演示

var M = document.forms.main;
var F = M.elements;
var FS = F.fieldset0;

FS.addEventListener('change', freeze);

function freeze(e) {
  if (e.target.tagName === "SELECT") {
    var tgt = e.target.id;
    e.target.disabled = true;
    var cache = document.querySelector(`input[name=${tgt}]`);
    cache.value = e.target.value;
  }
}

[type=submit] {
  display: block;
}

<form id='main' action='https://httpbin.org/post' method='post' target='view'>

  <fieldset id='fieldset0'>
    <select id='select0' name='select0'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
    <select id='select1' name='select1'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
    <select id='select2' name='select2'>
      <option default value=""></option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
    </select>
  </fieldset>
  <input id='cache0' name='select0' type='hidden'>
  <input id='cache1' name='select1' type='hidden'>
  <input id='cache2' name='select2' type='hidden'>
  <input type='submit'>

  <iframe name='view'></iframe>

如何防止用户在不使用禁用的情况下更改选择的值？

3 个答案:

演示