摘自https://stackoverflow.com/a/71086058/18183749

如果你不能使用'disabled'属性(因为它会擦除值的 input at POST)，并注意到html属性'readonly'只工作 在文本区域和一些输入(文本，密码，搜索，据我所见)， 最后，如果你不想重复你所有的 您可能会发现，带有隐藏输入逻辑的选择、复选框和单选 下面的函数或任何他的内部逻辑你喜欢:

addReadOnlyToFormElements = function (idElement) {
    
        // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
        $('#' + idElement + ' select>option:not([selected])').prop('disabled',true);
    
        // and, on the selected ones, to mimic readOnly appearance
        $('#' + idElement + ' select').css('background-color','#eee');
    }

没有什么比删除这些只读更容易的了

removeReadOnlyFromFormElements = function (idElement) {

    // Remove the disabled attribut on non-selected 
    $('#' + idElement + ' select>option:not([selected])').prop('disabled',false);

    // Remove readOnly appearance on selected ones
    $('#' + idElement + ' select').css('background-color','');
}

这可能在某种程度上与其他解决方案类似，但简化为更少的行数。

假设有一个jquery函数禁用目标选项…

$("select[id='country']").val('PH').attr("disabled", true);
$("select[id='country']").parent().append("<input type='hidden' id='country' value='PH'>");

如果你想重新启用这个选项…

$("select[id='country']").attr("disabled", false);
$("input[id='country']").remove();

简单的CSS解决方案:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

这导致在选择是灰色的漂亮的“禁用”光标悬停 在选择选项列表是“空”，所以你不能改变它的值。

下面是一个尝试使用自定义jQuery函数来实现的功能(如这里所述):

$(function(){

 $.prototype.toggleDisable = function(flag) {
    // prepare some values
    var selectId = $(this).attr('id');
    var hiddenId = selectId + 'hidden';
    if (flag) {
      // disable the select - however this will not submit the value of the select
      // a new hidden form element will be created below to compensate for the 
      // non-submitted select value 
      $(this).attr('disabled', true);

      // gather attributes
      var selectVal = $(this).val();
      var selectName = $(this).attr('name');

      // creates a hidden form element to submit the value of the disabled select
      $(this).parents('form').append($('<input></input>').
        attr('type', 'hidden').
        attr('id', hiddenId).
        attr('name', selectName).
        val(selectVal) );
    } else {
      // remove the newly-created hidden form element
      $(this).parents('form').remove(hiddenId);
      // enable back the element
      $(this).removeAttr('disabled');
    }
  }

  // Usage
  // $('#some_select_element').toggleDisable(true);
  // $('#some_select_element').toggleDisable(false);

});

您应该禁用select元素，但同时添加另一个具有相同名称和值的隐藏输入。

如果您重新启用SELECT，您应该将其值复制到onchange事件中的隐藏输入，并禁用(或删除)隐藏输入。

下面是一个演示:

$('#mainform').submit(function() { $('#formdata_container').show(); $('#formdata').html($(this).serialize()); return false; }); $('#enableselect').click(function() { $('#mainform input[name=animal]') .attr("disabled", true); $('#animal-select') .attr('disabled', false) .attr('name', 'animal'); $('#enableselect').hide(); return false; }); #formdata_container { padding: 10px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form id="mainform"> <select id="animal-select" disabled="true"> <option value="cat" selected>Cat</option> <option value="dog">Dog</option> <option value="hamster">Hamster</option> </select> <input type="hidden" name="animal" value="cat"/> <button id="enableselect">Enable</button> <select name="color"> <option value="blue" selected>Blue</option> <option value="green">Green</option> <option value="red">Red</option> </select> <input type="submit"/> </form> </div> <div id="formdata_container" style="display:none"> <div>Submitted data:</div> <div id="formdata"> </div> </div>

(简单的解决方案)

由于OP特别要求他不想禁用select元素，下面是我用来使select变为只读的方法

在html中

<select style="pointer-events: none;" onclick="return false;" onkeydown="return false;" ></select>

就是这样

解释

将pointer-events设置为none将禁用使用鼠标/光标事件编辑“select-element” 设置onclick和onkeydown函数返回false将禁用使用键盘编辑“select-element”

通过这种方式，您不必创建任何额外的元素，或使用javascript禁用/重新启用元素，或打乱表单提交逻辑，或使用任何第三方库。

此外，您可以轻松地添加css样式，如设置背景颜色为灰色或文本颜色为灰色，以暗示该元素是只读的。我没有将它添加到代码中，因为它非常特定于您的站点主题

或者你想通过javascript来实现

let isReadOnly = true; selectElement。Onclick = function () { isReadOnly; }; selectElement。onkeydown = function () { isReadOnly; }; selectElement.style.pointerEvents = isReadOnly ?“none”:“全部”;