-1

我已经为此工作了几天，但我仍然没有弄清楚。我有一个 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>
4

4 回答 4

2

这是我制作的一个工作 vbscript 示例，以了解我可以做些什么来使其在 vbscript 中工作（在客户端上）

  • Radio 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>
于 2013-03-06T13:34:46.113 回答
1

您可以在 html 中的输入上编写 disabled 属性，以便默认情况下禁用它们（加载时）

于 2013-03-05T23:06:04.847 回答
1

如果你真的只有两个按钮，这可以解决问题。请注意name两个单选按钮相同。这样，您可以将单选按钮组合在一起，而无需单独选中/取消选中它们。也onload()变得无用。

function enable(id)
    document.getElementById("text" & id).disabled = false
    document.getElementById("text" & id * -1).disabled = true
end function

<input id="radio1" name="radio" type="radio" value="radio1" onclick="enable(1)" />
<input id="text1" name="text1" type="text" value="hi" disabled />
                        :
<input id="radio2" name="radio" type="radio" value="radio2" onclick="enable(-1)" />
<input id="text-1" name="text2" type="text" value="bye" disabled />
于 2013-03-06T05:49:48.607 回答
0

我可以提出类似的建议。

<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>
于 2013-03-06T12:59:42.003 回答