下拉列表选择使只读文本框

Question

所以我遇到的问题是，取决于从下拉列表中 select 编辑的具体伤害，例如：大腿、手臂、头部、心脏、手指。某些文本框将是只读的。例如：如果您 select 是小指，除数字文本框外，所有文本框都将是只读的。如果 shoulder 是 selected，除 UE 之外的所有文本框都将是只读的。如果大腿或膝盖为 select，则除 LE 文本框外，所有文本框都将只读。**

<script type="text/javascript">
  function jsFunction(sel){
    var expression = sel.value;
    
  switch(expression) {
      case "1":
          document.getElementById("txtLowerExtremity").readOnly = true;
          document.getElementById("txtUpperExtremity").readOnly = false;
          document.getElementById("txtDigits").readOnly = false;
          break;
      case "2":
          document.getElementById("txtLowerExtremity").readOnly = false;
          document.getElementById("txtUpperExtremity").readOnly = true;
          document.getElementById("txtDigits").readOnly = false;
          break;
      case "3":
          document.getElementById("txtLowerExtremity").readOnly = false;
          document.getElementById("txtUpperExtremity").readOnly = false;
          document.getElementById("txtDigits").readOnly = true;
          break;  
      case "4":
          document.getElementById("txtLowerExtremity").readOnly = false;
          document.getElementById("txtUpperExtremity").readOnly = false;
          document.getElementById("txtDigits").readOnly = false;
          break;
                    
      default:
          //do nothing
  } 
  }
</script>

<asp:DropDownList ClientIDMode="Static" onChange="dropDownListSelection(sel)" ID="ddlImpairment" runat="server">
    <asp:ListItem Text="---- " Value="00.00.00.00" />
    <asp:ListItem Value="03.01.00.00" Text="03.01.00.00 [ ] Valvular Heart Disease" />
    <asp:ListItem Value="03.02.00.00" Text="03.02.00.00 [ ] Coronary Heart Disease" />
    <asp:ListItem Value="03.03.00.00" Text="03.03.00.00 [ ] Congenital Heart Disease" />
    <asp:ListItem Value="03.04.00.00" Text="03.04.00.00 [ ] Cardiomyopathies" />
    <asp:ListItem Value="03.05.00.00" Text="03.05.00.00 [ ] Pericardial Heart Disease" />
    <asp:ListItem Value="03.06.00.00" Text="03.06.00.00 [ ] Arrhythmia" />

    

<asp:ListItem Value="18.00.00.00" Text="18.00.00.00 [ ] Pain - use FEC rank for involved body part." />  </asp:DropDownList>



<asp:TextBox ID="txtUpperExtremity" MaxLength="2"  ClientIDMode="Static" Width="40px" runat="server"></asp:TextBox>

<asp:TextBox ID="txtLowerExtremity" MaxLength="2" ClientIDMode="Static" Width="40px" runat="server"></asp:TextBox>

<asp:TextBox name="txtDigits" MaxLength="2" ClientIDMode="Static" ID="txtDigits" Width="40px" runat="server">/asp:TextBox>

Answer 1

下面是适合您的解决方案。

<asp:DropDownList ClientIDMode="Static" onchange="javascript: jsFunction();" ID="ddlImpairment" runat="server">
            <asp:ListItem Text="---- " Value="00.00.00.00" />
            <asp:ListItem Value="03.01.00.00" Text="03.01.00.00 [ ] Valvular Heart Disease" />
            <asp:ListItem Value="03.02.00.00" Text="03.02.00.00 [ ] Coronary Heart Disease" />
            <asp:ListItem Value="03.03.00.00" Text="03.03.00.00 [ ] Congenital Heart Disease" />
            <asp:ListItem Value="03.04.00.00" Text="03.04.00.00 [ ] Cardiomyopathies" />
            <asp:ListItem Value="03.05.00.00" Text="03.05.00.00 [ ] Pericardial Heart Disease" />
            <asp:ListItem Value="03.06.00.00" Text="03.06.00.00 [ ] Arrhythmia" />
            <asp:ListItem Value="18.00.00.00" Text="18.00.00.00 [ ] Pain - use FEC rank for involved body part." />
        </asp:DropDownList>



        <asp:TextBox ID="txtUpperExtremity" MaxLength="2" ClientIDMode="Static" Width="40px" runat="server"></asp:TextBox>

        <asp:TextBox ID="txtLowerExtremity" MaxLength="2" ClientIDMode="Static" Width="40px" runat="server"></asp:TextBox>

        <asp:TextBox name="txtDigits" MaxLength="2" ClientIDMode="Static" ID="txtDigits" Width="40px" runat="server"></asp:TextBox>

<script type="text/javascript">
    function jsFunction() {
        var expression = document.getElementById("ddlImpairment").selectedIndex;

        switch (expression) {
            case 1:
                document.getElementById("txtLowerExtremity").readOnly = true;
                document.getElementById("txtUpperExtremity").readOnly = false;
                document.getElementById("txtDigits").readOnly = false;
                break;
            case 2:
                document.getElementById("txtLowerExtremity").readOnly = false;
                document.getElementById("txtUpperExtremity").readOnly = true;
                document.getElementById("txtDigits").readOnly = false;
                break;
            case 3:
                document.getElementById("txtLowerExtremity").readOnly = false;
                document.getElementById("txtUpperExtremity").readOnly = false;
                document.getElementById("txtDigits").readOnly = true;
                break;
            case 4:
                document.getElementById("txtLowerExtremity").readOnly = false;
                document.getElementById("txtUpperExtremity").readOnly = false;
                document.getElementById("txtDigits").readOnly = false;
                break;

            default:
                //do nothing
        }
    }
</script>

如果您需要任何进一步的帮助，请告诉我。

下拉列表选择使只读文本框

Drop Down List Selection makes read only text box

javascript

asp.net

jquery

textbox

html.dropdownlistfor