前言

  项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化form获取到select标签的值;当我们使用readonly="readonly"发现,我们还是能展开下拉框并选择值,这时候我们应该怎么实现这个需求呢?

  代码实现

  方法一

  1、设置readonly="readonly",设置被禁用的页面效果

  2、设置onmousedown="return false;",设置禁止鼠标按下事件

<form id="form">
<select id="select" name="select" class="form-control" readonly="readonly" onmousedown="return false;">
<option value="">请选择</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</form>

  效果:select标签 禁止选择但又能通过序列化form表单传值到后台-LMLPHPselect标签 禁止选择但又能通过序列化form表单传值到后台-LMLPHP

  

  如何在js动态的添加与移除这个效果呢?

//js动态添加
$("#select").attr("readonly","readonly");
$("#select").attr("onmousedown","return false;");
//js动态移除
$("#select").removeAttr("readonly");
$("#select").removeAttr("onmousedown");

  为了页面更加好看,可以设置鼠标的禁用样式:cursor: not-allowed;

$("#select").css("cursor","not-allowed");
$("#select").css("cursor","");

select标签 禁止选择但又能通过序列化form表单传值到后台-LMLPHP        select标签 禁止选择但又能通过序列化form表单传值到后台-LMLPHP

  后记

  暂时先记录到这里,后续有空再继续更新

04-30 21:12