Как сделать отключение / включение в HTML?

Question

Когда я выбираю кофе группа флажков - включена группа блоков кнопок - отключена

Когда я выбираю горячий кокос группа флажков - отключена группа полей кнопок - включена

НИЖЕ КОД:

<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 .

Я выучил javascript у W3Schools .

Answer 2

Нечто подобное может помочь.

<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 3

Используйте JavaScript для изменения атрибута CSS DISPLAY для данного атрибута HTML:

<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>

Ссылка: Переключить видимость - показать / скрыть что-либо

Answer 4

Вы можете использовать JavaScript, чтобы включить или отключить элементы управления как:

var varName = document.getElementById ('<% = this.buttonGroup.ClientID%>'); varName.disabled = true или false; в соответствии с вашими требованиями.

Приветствия