Question

我有一张表格。我想禁用或启用下拉菜单，具体取决于单选按钮的选择。我需要在表单中多次这样做。我是Javascript的新手，所以我真的不知道从哪里开始。这是表格的一部分：

<p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
 <label><input type="radio" name="hospital" /> Not Complete </label>
<label><input type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
 <label>Month Complete: 
<select>
  <option>January</option>
  <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</label>
</div>

然后我基本上有几个这样的复制品..

<p id="ppd"><label>PPD:</label>
<div id='buttons'>
<label><input type="radio" name="ppd" /> Not Complete </label>
<label><input type="radio" name="ppd" /> Complete </label>
</div>
<div id="list2" style="display: none;">
  <label>Month Complete: 
    <select>
      <option>January</option>
      <option>February</option>
      <option>March</option>
      <option>April</option>
      <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

现在我真的不知道从哪里去。

Answer 1

您需要为您的收音机盒创造价值并添加ID，例如“rButtonOne”和“rButtonTwo”

<input type="radio" id="rButtonOne" onclick="clicked(this);" value="0">
<input type="radio" id="rButtonTwo" onclick="clicked(this);" value="1">

然后是javascript

function clicked(obj)
{
   if(obj.value == "1")
      document.getElementById('id_of_select_box').disabled = 'disabled';
   else if (obj.value == "0")
      document.getElementById('id_of_select_box').disabled = '';
}

这是方法。

Answer 2

HTML

<p id="hospitalorientation"><label>Hospital Orientation:</label>
<div id='buttons'>
 <label><input id="radio1" type="radio" name="hospital" /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" /> Complete </label>
</div>
<div id="list1" style="display: none;">
 <label>Month Complete:
<select>
  <option>January</option>
  <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</label>
</div>

使用Javascript：

document.getElementById("radio1").onchange = function(){
    if(this.checked == true){
        document.getElementById("list1").style.visibility = "hidden";
        document.getElementById("list1").style.display = "none";
    }
};

document.getElementById("radio2").onchange = function(){
    if(this.checked == true){
        document.getElementById("list1").style.visibility = "visible";
        document.getElementById("list1").style.display = "block";
    }
};

工作示例：http://jsfiddle.net/aSxXA/

这是一个更新，这是一个完整的html页面，注意body onload事件如何注册eventHandlers，我认为在你尝试注册它们之前可能没有加载文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type=text/javascript>
            function registerEventHandlers()
            {
            document.getElementById("radio1").onchange = function(){
                hideDiv(this,"list1")
            };
            document.getElementById("radio2").onchange = function(){
                showDiv(this,"list1")
            };
            document.getElementById("radio3").onchange = function(){
                hideDiv(this,"list2")
            };
            document.getElementById("radio4").onchange = function(){
                showDiv(this,"list2")
            };              
            }

            function showDiv(targetElement,toggleElementId){
                    if (targetElement.checked == true) {
                        document.getElementById(toggleElementId).style.visibility = "visible";
                        document.getElementById(toggleElementId).style.display = "block";
                    }                
            }
            function hideDiv(targetElement,toggleElementId){
                    if (targetElement.checked == true) {
                        document.getElementById(toggleElementId).style.visibility = "hidden";
                        document.getElementById(toggleElementId).style.display = "none";
                    }                
            }
        </script>
    </head>
    <body onload="registerEventHandlers();">
        <p id="hospitalorientation">
            <label>
                Hospital Orientation:
            </label>
            <div id='buttons'>
                <label>
                    <input id="radio1" type="radio" name="hospital" /> Not Complete 
                </label>
                <label>
                    <input id="radio2" type="radio" name="hospital" /> Complete 
                </label>
            </div>
            <div id="list1" style="display: none;">
                <label>
                    Month Complete: 
                    <select>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                </label>
            </div>
            <p id="ppd">
                <label>
                    PPD:
                </label>
                <div id='buttons'>
                    <label>
                        <input id="radio3" type="radio" name="ppd" /> Not Complete 
                    </label>
                    <label>
                        <input id="radio4" type="radio" name="ppd" /> Complete 
                    </label>
                </div>
                <div id="list2" style="display: none;">
                    <label>
                    Month Complete: 
                    <select>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                    </body>
                </html>

如果在之前的下拉列表中进行了某些选择，则显示/隐藏下拉列表

2 个答案: