js 動態控制 input 框 的只讀屬性

需求:

　　當下拉框的值為06即Voucher時, 文本框才可輸入, 其他情況均為置灰不可錄入狀態.

問題:

　　設置input框的只讀屬性寫成了readonly="true" 尼瑪,坑死我了.下面才對: readonly="readonly"

<td>
    Payment Mode
    <select id="paymentMode" name="paymentMode" style="width: 155px" onchange="changeStyle()">
        <option selected value="">-請選擇-</option>
        <option value="01">Cash</option>
        <option value="02">Credit</option>
        <option value="03">Debit</option>
        <option value="04">Nets</option>
        <option value="05">Cheque</option>
        <option value="06">Voucher</option>
        <option value="90">PresetCredit</option>
    </select>
</td>
<td align="right">
    Voucher Number
    <input class="inuptxt ac_input" type="text" id="payNo" name="payNo" readonly="readonly">
</td>

 

<script>

    //初始化voucherNo文本框
    $(document).ready(function () {
        var payNo = $("#payNo");
        payNo.attr("readOnly","true");
        payNo.css('background-color','#DEDEDE');
    });

    //voucherNo樣式
    function changeStyle(){
        var paymentMode = $("#paymentMode").val();
        // $("#payNo").css('background-color','#DEDEDE');//沒毛病
        var payNo = $("#payNo");
        if(paymentMode!='06'){//沒毛病
            payNo.attr("readOnly","true");
            payNo.css('background-color','#DEDEDE');
        } else {
            payNo.attr("readOnly",false);
            payNo.css('background-color','#FFFFFF');
        }
    }

</script>

 

以下內容為轉載:

input 框的只讀屬性：  readonly

在頁面中直接添加為只讀時，可在input中直接添加   readonly="readonly"，但是如果想通過點擊按鈕來改變的話，需要通過js（或jquery）來實現。

最近一次使用這個，終於發現了以前寫這個js控制的時候為什么總是那么郁悶了，原來，js  在對於readonly、disabled等屬性設置時，有一個小bug（至少我是這么認為）：首先，document.getElementById("id").readonly = "true";  設置input為只讀，但是，當通過document.getElementById("id").readonly="false"  來去掉只讀屬性時，沒有作用，此時，需要把  false  外面的引號給去掉js語句才能正常工作。

附：

1. jquery  通過id屬性設置與取消只讀屬性

 

設置只讀：$("#id").attr("readOnly","true");

取消只讀：$("#id").attr("readOnly",false);//注意false不帶引號!!!

 

2. jquery  批量設置與取消只讀屬性

/*   id為sa的div中，所有input框   */

 

設置只讀：$("#sa input").attr("readOnly","true");

取消只讀：$("#sa input").attr("readOnly",false);

 

感謝:https://blog.csdn.net/katherine119/article/details/39154615