select標簽 禁止選擇但又能通過序列化form表單傳值到后台

　　前言

　　項目開發中，我們可能會碰到這樣的需求：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>

　　效果：

　　

　　如何在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","");

        

 

 

　　后記

　　暫時先記錄到這里，后續有空再繼續更新