Question

当我选择咖啡时复选框组已启用按钮框组 - 已禁用

当我选择Hot Coco时复选框组 - 已禁用按钮框组已启用

以下代码：

<fieldset id="mixdrinks">
<!-- pull down or drop menu examples -->
<label><strong>Drinks Selection</strong></label><br />
<select name="drinks" id="drinks">
  <option selected="selected" label="none" value="none">null</option>  
  <option value="Coffee">Coffee</option>
  <option value="Tea">Tea</option>
  <option value="Juice">Juice</option>
  <option value="Milk">Milk</option>
  <option value="Hot Chocolate">Hot Coco</option>
</select>
<br />

<!-- check box -->
<label><strong>What do you want in your coffee?</strong></label><br />
<input type="checkbox" name="sugar" id="Checkbox1" value="yes" tabindex="4" /> Sugar<br />
<input type="checkbox" name="milk" id="Checkbox2" value="yes" tabindex="5" /> Milk<br />
<input type="checkbox" name="cream" id="Checkbox3" value="yes" tabindex="6"/> Cream
<p>...more mix drinks...</p>

<!-- radio buttons -->
<label><strong>Do you want Whip Cream on your Hot Coco?:</strong></label><br />
<input type="radio" name="WhipCream" id="Radio1" value="yes" title="Yes" />Yes<br />
<input type="radio" name="WhipCream" id="Radio2" value="yes" title="No" />No<br />
<br />

Answer 1

要做你要问的事情，你需要的不仅仅是html，还需要Javascript。

我从W3Schools学习了javascript。

Answer 2

使用javascript更改给定HTML属性的CSS DISPLAY属性：

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);

       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

..然后使用类似的内容更新您要隐藏的内容：

<span onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</span>
<div id="foo">This is foo</div>

参考：Toggle Visibility - Show/Hide Anything

Answer 3

这样的事情可能有所帮助。

<select name="drinks" id="drinks">
      <option selected="selected" label="none" value="none">null</option>  
      <option value="Coffee">Coffee</option>
      <option value="Tea">Tea</option>
      <option value="Juice">Juice</option>
      <option value="Milk">Milk</option>
      <option value="Hot Chocolate">Hot Coco</option>
    </select>
    <br />

    <!-- check box -->
    <div id="coffeeDetails">
    <label><strong>What do you want in your coffee?</strong></label><br />
    <input type="checkbox" name="sugar" id="Checkbox1" value="yes" tabindex="4" /> Sugar<br />
    <input type="checkbox" name="milk" id="Checkbox2" value="yes" tabindex="5" /> Milk<br />
    <input type="checkbox" name="cream" id="Checkbox3" value="yes" tabindex="6"/> Cream
    <p>...more mix drinks...</p>
    </div>

    <!-- radio buttons -->
    <div id="cocoDetails">
    <label><strong>Do you want Whip Cream on your Hot Coco?:</strong></label><br />
    <input type="radio" name="WhipCream" id="Radio1" value="yes" title="Yes" />Yes<br />
    <input type="radio" name="WhipCream" id="Radio2" value="yes" title="No" />No<br />
    <br />
    </div>

    <script type="text/javascript">

        window.onload = function() {

            var ddl = document.getElementById("drinks");

            var coffeeDetails = document.getElementById("coffeeDetails");
            var cocoDetails = document.getElementById("cocoDetails");

            ddl.onchange = function() {
                var beverage = ddl.options[ddl.selectedIndex].text;
                if (beverage == "Coffee") {
                    cocoDetails.style.display = "none";
                    coffeeDetails.style.display = "block";
                }

                if (beverage == "Hot Coco") {
                    cocoDetails.style.display = "block";
                    coffeeDetails.style.display = "none";
                }
            }
        };

    </script>

Answer 4

您可以使用javascript启用或禁用控件：

var varName = document.getElementById（'＆lt;％= this.buttonGroup.ClientID％＆gt;'）; varName.disabled = true或false;符合你的要求。

干杯

如何在HTML中禁用/启用？

4 个答案: