根据另一个表单字段（单选按钮）预填充值 HTML 表单输入

Question

我正在制作注册表单。如果选择的注册类型（单选按钮）是“自己”，我想用“1”预填充票证字段的数量。我的代码：

index.html

<div class="containerx">
    
            <h2>Registration type: </h2>
            
          <ul id="ullu">
          <li>
            <input type="radio" id="f-option" name="regType" value="Self" required>
            <label for="f-option">Self</label>
            
            <div class="check"></div>
          </li>
            <li>
            <input type="radio" id="s-option" name="regType" value="Group" required>
            <label for="s-option">Group</label>
            
            <div class="check"></div>
          </li>
                  <li>
            <input type="radio" id="t-option" name="regType" value="Corporate" required>
            <label for="t-option">Corporate</label>
            
            <div class="check"></div>
          </li>
                
          <li>
            <input type="radio" id="fo-option" name="regType" value="Others" required>
            <label for="fo-option">Others</label>
            
            <div class="check"><div class="inside"></div></div>
          </li>
          
          
        </ul>
        </div>
           <fieldset class="form-fieldset ui-input __first" style="z-index: 0">
            <input type="number" required id="ticket" tabindex="0" name="ticketNo" min="1" max="25"/>
            <label for="ticket">
              <span data-text="Number of Tickets (Not more than 25)">Number of Tickets (Not more than 25)</span>
            </label>
          </fieldset>

Answer 1

纯 javascript 解决方案将是

var radios = document.getElementsByName('regType');
var ticket = document.getElementById('ticket');

for(radio in radios) {
    radios[radio].onclick = function() {
      if (this.value === 'Self') {
          ticket.value = '1';
          ticket.disabled = true;
       } else {
          ticket.value = '';
          ticket.disabled = false;
       }
    }
}

<div class="containerx">

            <h2>Registration type: </h2>

          <ul id="ullu">
          <li>
            <input type="radio" id="f-option" name="regType" value="Self" required>
            <label for="f-option">Self</label>

            <div class="check"></div>
          </li>
            <li>
            <input type="radio" id="s-option" name="regType" value="Group" required>
            <label for="s-option">Group</label>

            <div class="check"></div>
          </li>
                  <li>
            <input type="radio" id="t-option" name="regType" value="Corporate" required>
            <label for="t-option">Corporate</label>

            <div class="check"></div>
          </li>

          <li>
            <input type="radio" id="fo-option" name="regType" value="Others" required>
            <label for="fo-option">Others</label>

            <div class="check"><div class="inside"></div></div>
          </li>


        </ul>
        </div>
           <fieldset class="form-fieldset ui-input __first" style="z-index: 0">
            <input type="number" required id="ticket" tabindex="0" name="ticketNo" min="1" max="25"/>
            <label for="ticket">
              <span data-text="Number of Tickets (Not more than 25)">Number of Tickets (Not more than 25)</span>
            </label>
          </fieldset>

您可以修改上面的代码，将字段设置为只读，而不是完全禁用它将 ticket.disabled 替换为 ticket.readOnly

参考this answer了解disabled和readonly的区别

Answer 2

您需要在单选按钮上使用 onchange 事件

我创建了一个“setCount”函数，它获取要在计数字段中设置的数字并将其设置在该文本框中。

由于该函数是参数化的，因此您可以对单选按钮组中的不同值使用不同的值，而无需创建额外的变量来存储不同单选按钮的值。

function setCount(val, disableInput=false) {
  const inputBox = document.getElementById('count');
  inputBox.value = val;
  if (disableInput) inputBox.disabled = true;
}

<!DOCTYPE html>
<html>
<body>
  <ul id="ullu">
    <li>
      <input type="radio" id="f-option" onchange="setCount(1, true)" name="regType" value="Self" required>
      <label for="f-option">Self</label>

      <div class="check"></div>
    </li>

    <li>
      <input type="radio" id="s-option" onchange="setCount(5)" name="regType" value="Group" required>
      <label for="s-option">Group</label>

      <div class="check"></div>
    </li>

    <li>
      <input type="radio" id="t-option" onchange="setCount(50)" name="regType" value="Corporate" required>
      <label for="t-option">Corporate</label>

      <div class="check"></div>
    </li>
  </ul>
  
  <input type='number' id='count'/>
</body>
</html>

根据另一个表单字段（单选按钮）预填充值 HTML 表单输入

Pre-populate a value HTML form input depending on another another form field (radio buttons)

html

javascript

forms

jquery

radio-button

index.html