無効にしたコントロールをJavaScriptに戻すにはどうすればいいですか？

Question

ユーザーがコントロールをクリックしたときにコントロールを無効にするコードを実行しました。私のフォームで私はTextBoxとDropDownを持っています。ユーザーがTextBoxをクリックすると、 DropDownのようになります。DropDownをクリックすると、うまく動作するTextBoxが無効になります。

しかし、ユーザがDisabledコントロールをクリックすると、そのコントロールを有効にしたいと思います。

<script type="text/javascript"> 

function toggleDropDownList1() 
{ 
var d=document.getElementById("<%= DropDownList4.ClientID %>"); 
if(d.disabled) 
{ 
d.disabled=false; 
} 
else 
{ 
document.getElementById("<%= TextBox1.ClientID %>").disabled = true; 
} 
} 
function toggleDropDownList2() 
{ 
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true; 
} 
</script> 

あなたがデザイン

<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox> 
     <asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();"> 
      <asp:ListItem Text="One" Value="1"></asp:ListItem> 
      <asp:ListItem Text="One" Value="1"></asp:ListItem> 
     </asp:DropDownList> 

Answer 1

考えられるのは、ドロップダウンリストの前にdivを置くことです。このdivはonclickイベントを受け入れます。

ここで問題となるのは、divがドロップダウンリストの前に簡単に配置できないことです。配置するには、動的に行い、絶対位置を使用する必要があります。

私はここに小さなコードを作り、テストして作業しています。私はそれがどこにあるかを見るためにdivに背景色のREDを残しました。私はあなたのコントロールリストの幅と高さを見つけるなど、いくつかの詳細を私はあなたに残しました、私はonclickを置きます、あなたはダブルクリックを置くことができます、そしてちょうど赤い背景を削除します。

<script type="text/javascript"> 
function toggleDropDownList1() 
{ 
    var MyDiv = document.getElementById("DivForClick"); 
    MyDiv.style.display = "none"; 

    var d=document.getElementById("<%= DropDownList4.ClientID %>"); 
    if(d.disabled) 
    { 
     d.disabled=false; 
    } 
    else 
    { 
     document.getElementById("<%= TextBox1.ClientID %>").disabled = true; 
    } 
} 

function toggleDropDownList2() 
{ 
    document.getElementById("<%= DropDownList4.ClientID %>").disabled = true; 

    var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>"); 
    var MyDiv = document.getElementById("DivForClick"); 

    MyDiv.style.display = "block"; 
    MyDiv.style.left = MyDdl.style.left; 
    MyDiv.style.top = MyDdl.style.top; 

    // need to find the height/width 
    // MyDiv.style.height = MyDdl.style.height; 
    // MyDiv.style.width = MyDdl.style.width; 
} 
</script> 

とaspコード。

<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox> 

<br /><br /> 

<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;"> 
</div> 

<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;"> 
    <asp:ListItem Text="One" Value="1"></asp:ListItem> 
    <asp:ListItem Text="Two" Value="2"></asp:ListItem> 
</asp:DropDownList> 

Answer 2

を意味するかは、次のように私のサンプルスクリプトがある

..私はTextBoxをクリックした場合、私はあまりにもdropdownのためにそのようにそれをEnableしたい無効にされた意味

function toggleIt() { 
    var d=document.getElementById("<%= DropDownList4.ClientID %>"); 
    var t =document.getElementById("<%= TextBox1.ClientID %>"); 
    d.disabled=!d.disabled 
    t.disabled=!t.disabled 
} 

<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox> 
    <asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();"> 
     <asp:ListItem Text="One" Value="1"></asp:ListItem> 
     <asp:ListItem Text="One" Value="1"></asp:ListItem> 
    </asp:DropDownList> 

Answer 3

明らかにFirefoxとpe無効なフォームフィールドで開始するイベントは完全に取り消され、DOMツリーを伝播しません。

このようにするには、回避策を講じる必要があります。

実際にフィールドを無効にするのではなく、フィールドが無効になっているかのようにフィールドのスタイルを設定して、引き続きクリックイベントをキャプチャできます。