如何根據用戶所做的選擇將只讀下拉列表/文本框更改為讀/寫？

Question

它將具有一個文本框（txtGRC），無論如何，該文本框都將被讀取/寫入。

但是，我想將其余的框都顯示為灰色，直到已向txtGRC中輸入內容為止。

我的問題要比這復雜得多，但是一旦解決，我相信我可以接管其余的工作。 很好笑，我可以在VB上輕松完成此操作。

這是容器的代碼：

<content id="GenerateReportContent" class="col-md-4">
    <form id="GenerateReportContainer">
        <div class="AltFunctions">
            <ul>
                <li>
                    <a href="#" class="AltButton" id="altClearButton">Clear</a>
                </li>
                <li>
                    <a href="#" class="AltButton" id="GRaltInfoButton">Info</a>
                </li>
            </ul>
        </div>
        <h1 id="GenerateReportHeader">GENERATE REPORT</h1>
        <input type="text" id="txtGRC" class="form-control" placeholder="Enter Specific Claim Number...." >
        <p id="txtOptional">(optional)</p>
        <select id="GRDropDown">
            <option value="SelectReport">Select Report</option>
        </select>
        <br />

        <select id="GRDropDown">
            <option value="SelectSupplierName" disabled="disabled">Select Supplier Name</option>
        </select>
        <br />
        <select id="GRDropDown">
            <option value="SelectReviewPeriod" disabled="disabled">Select Review Period</option>
        </select>
        <div class="form-group">
            <input type="text" id="txtGRC" class="form-control" placeholder="Month Code..." disabled="disabled">
            <p id="txtOptional">(optional)</p>

        </div>
        <button type="submit" id="GenerateReportButton" class="btn btn-default">GO</button>
    </form>
</content>

如果您需要更多信息，請發表評論，我將盡我所能。 先感謝您。

Answer 1

使用javascript / jQuery，您將必須處理該文本框上的按鍵，並且如果文本框的值的長度大於0或所需的長度，則禁用每個其他輸入，則將其啟用。

一個例子：

$(".txtGRC").keyup(function() {
    if( $(this).length > 0 ) {
        $("input.disabled").each(function() {
            $(this).prop("disabled", false);
        });
    }
    else {
        $("input.disabled").each(function() {
            $(this).prop("disabled", true);
        });
    }
});

因此，基本上以上代碼（使用jQuery）都在用戶釋放按鍵時進行檢查，並計算文本區域的長度，如果該長度大於0，則會啟用“ .disabled”類的de輸入（在此處應將輸入放以禁用開始），否則，將其禁用。

Answer 2

首先，應將“已禁用”屬性應用於“選擇”標記而非“選項”。

<select id="GRDropDown" disabled>

現在，對於“ txtGRC”字段，您可以選擇三個屬性（作為事件處理程序）：

• 輸入
• 糊劑
• 按鍵

取決於客戶端將使用的瀏覽器。

<input type="text" id="txtGRC" class="form-control" placeholder="Enter Specific Claim Number...." onkeydown="valueChanged()">

最后，添加javascript函數以禁用/啟用“ GRDropDown”下拉列表：

<script>
    function valueChanged() {
        var val = document.getElementById("txtGRC").value;
        var dd = document.getElementById("GRDropDown");
        if(val.length>0) dd.disabled=false;
        else dd.disabled = true;
    }
</script>

如果您的代碼中以前包含了jQuery，則解決方案會更簡單。