根據用戶的選擇，如何更改只讀下拉框/文本框以進行讀取/寫入？

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）檢查每當用戶釋放按下的鍵，並計算textarea的長度，如果是大於0，它使去輸入與類「.disabled」（在這裏你應該把輸入開始禁用），否則，它禁用它們。

Answer 2

首先，「禁用」屬性應該應用於「選擇」標籤而不是「選項」。現在

<select id="GRDropDown" disabled>

，爲你的 「txtGRC」 領域，你有三個屬性可供選擇（如事件處理程序）：

• oninput
• onpaste
• 的onkeydown

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

<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包含在你的代碼，該解決方案會更簡單。