html - HTML入力を無効/有効にするvbscript

Question

私はこれを数日間取り組んでいますが、まだ理解していません。それぞれがラジオボタンといくつかのテキストで構成される 2 つの入力セットを持つ HTML ページがあります。私は欲しい：

ページの読み込み時にすべてのテキスト入力を無効にする
ラジオボタン #1 でテキスト入力を有効にし、ラジオボタン #2 のテキスト入力を無効にします
ラジオボタン #2 でテキスト入力を有効にし、ラジオボタン #1 のテキスト入力を無効にします

コード例を次に示します。

<html>

<script type="text/vbscript">
<!--<![CDATA[
function enable()
    if document.GetElementByID("radio1").checked then
        document.GetElementByID("radio2").checked = false
        document.GetElementByID("text1").disabled = false
        document.GetElementByID("text2").disabled = true
    elseif document.GetElementByID("radio2").checked then
        document.GetElementByID("radio1").checked = false
        document.GetElementByID("text1").disabled = true
        document.GetElementByID("text2").disabled = false
    else
        document.GetElementByID("text1").disabled = true
        document.GetElementByID("text2").disabled = true
    end if
end function
-->]]>
</script>

<body onload="enable()">
    <table border=1>
        <tr>
            <td>
                <input type="radio" id="radio1" name="radio1" value="radio1" onclick="enable()">
                <label for="radio1" >
                    Radio 1
                </label>
            </td>
            <td>
                <input type="text" id="text1" name="text1" value="hi">
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio2" name="radio2" value="radio2" onclick="enable()">
                <label for="radio2" >
                    Radio 2
                </label>
            </td>
            <td>
                <input type="text" id="text2" name="text2" value="bye">
            </td>
        </tr>
    </table>
</body>

</html>

部分的には機能するようですが、完全には機能しないようです。最終的に、これはフォームとして HTA になります。

編集：

@kingdomcreation と @Teemu の両方のおかげで、任意の数のラジオボタンに対してこの実用的なソリューションを使用できるようになりました。

<html>

    <script type="text/vbscript">
        <!--<![CDATA[
        function enable(num)
            document.getElementById("text" & num).disabled = false

            for i = 1 to 6
                if document.getElementById("radio" & i).checked = false Then
                    document.getElementById("text" & i).disabled = true
                end if
            next
        end function
        -->]]>
    </script>

    <body>
        <table border=1>
            <tr>
                <td>
                    <input type="radio" id="radio1" name="radio" value="radio1" onClick="enable(1)">
                    <label for="radio1" >
                        Radio 1
                    </label>
                </td>
                <td>
                    <input disabled type="text" id="text1" name="text1" value="hi">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" id="radio2" name="radio" value="radio2" onClick="enable(2)">
                    <label for="radio2" >
                        Radio 2
                    </label>
                </td>
                <td>
                    <input disabled type="text" id="text2" name="text2" value="there">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" id="radio3" name="radio" value="radio3" onClick="enable(3)">
                    <label for="radio3" >
                        Radio 3
                    </label>
                </td>
                <td>
                    <input disabled type="text" id="text3" name="text3" value="how">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" id="radio4" name="radio" value="radio4" onClick="enable(4)">
                    <label for="radio4" >
                        Radio 4
                    </label>
                </td>
                <td>
                    <input disabled type="text" id="text4" name="text4" value="are">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" id="radio5" name="radio" value="radio5" onClick="enable(5)">
                    <label for="radio5" >
                        Radio 5
                    </label>
                </td>
                <td>
                    <input disabled type="text" id="text5" name="text5" value="you">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" id="radio6" name="radio" value="radio6" onClick="enable(6)">
                    <label for="radio6" >
                        Radio 6
                    </label>
                </td>
                <td>
                    <input disabled type="text" id="text6" name="text6" value="bye">
                </td>
            </tr>
        </table>
    </body>
</html>

score 2 · Accepted Answer

これは、(クライアント上で) vbscript で機能させるために何ができるかを確認するために作成した実際の vbscript の例です。

ラジオ ID はクリックされたものを識別できますが、オプションのように動作するオプション (一方がクリックされると、もう一方がオフになる) を使用するには、name 属性が同じである必要があります。
vbコードは下に配置されました
関数コードが vb 構文に変更されました
document.GetElementByID が削除されました

クライアント側のvbscriptを実行したい場合、これがいくつかのことを解決することを願っています...ちなみに、これは他のブラウザーに拡張機能を追加する機能のIE appartの唯一のサポーターです。

<html>


<body onLoad="enable()">
<table border=1>
    <tr>
        <td>
            <input type="radio" id="radio1" name="radio" value="radio1" onClick="enable()">
            <label for="radio1" >
                Radio 1
            </label>
        </td>
        <td>
            <input type="text" id="text1" name="text1"  disabled value="hi">
        </td>
    </tr>
    <tr>
        <td>
            <input type="radio" id="radio2" name="radio"  value="radio2" onClick="enable()">
            <label for="radio2" >
                Radio 2
            </label>
        </td>
        <td>
            <input type="text" id="text2" name="text2" disabled value="bye">
        </td>
    </tr>
</table>

<script type="text/vbscript">
<!--<![CDATA[
Function enable()
If radio1.checked = true Then
    radio2.checked = false
    text1.disabled = false
    text2.disabled = true
ElseIf radio2.checked = true Then
    radio1.checked = false
    text1.disabled = true
    text2.disabled = false
 Else
    text1.disabled = true
    text2.disabled = true
 End If
End Function
-->]]>
</script>
</body>

</html>

score 1 · Accepted Answer

html の入力に無効な属性を書き込むことができるので、デフォルトで (ロード時に) 無効になります。

score 0 · Accepted Answer

似たようなものを提案できます。

<html>

<script>
<!--<![CDATA[
function enable(){
    if( document.getElementById("radio1").checked){
        document.getElementById("radio2").checked = false
        document.getElementById("text1").disabled = false
        document.getElementById("text2").disabled = true
    }else if( document.getElementById("radio2").checked){
        document.getElementById("radio1").checked = false
        document.getElementById("text1").disabled = true
        document.getElementById("text2").disabled = false
    }else{
        document.getElementById("text1").disabled = true
        document.getElementById("text2").disabled = true
    }
}
-->]]>
</script>

<body onload="enable()">
    <table border=1>
        <tr>
            <td>
                <input type="radio" id="radio1" name="radio" value="radio1" onclick="enable()">
                <label for="radio1" >
                    Radio 1
                </label>
            </td>
            <td>
                <input type="text" id="text1" name="text1" value="hi">
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" id="radio2" name="radio" value="radio2" onclick="enable()">
                <label for="radio2" >
                    Radio 2
                </label>
            </td>
            <td>
                <input type="text" id="text2" name="text2" value="bye">
            </td>
        </tr>
    </table>
</body>

</html>

html - HTML入力を無効/有効にするvbscript

4 に答える 4

Related

Reference