Question

我有两个单选按钮。如果选中第一个单选按钮“主要地址”，则应禁用以下表格。如果然后我单击第二个单选按钮“其他地址”，则应激活该表格。

如果还没有选中任何单选按钮，则我也希望表单处于主要状态（在页面上重定向时，两个单选按钮都未选中）。

如何使用JavaScript解决此问题？

<form class="needs-validation" novalidate>
                        <!--was-validated -->
                        <div class="d-block my-3">
                            <div class="custom-control custom-radio">
                                <input id="Main address" name="paymentMethod" type="radio" class="custom-control-input" required>
                                <label class="custom-control-label" for="Main address">Main address</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input id="Other address" name="paymentMethod" type="radio" class="custom-control-input" required>
                                <label class="custom-control-label" for="Other address">Other address</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="cc-name">Address</label>
                                <input type="text" class="form-control" id="cc-name" placeholder="" required>
                                <small class="text-muted">Please enter your other address.</small>
                                <div class="invalid-feedback">
                                    Name on card is required
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="cc-expiration">City</label>
                                <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
                                <div class="invalid-feedback">
                                    Expiration date required
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="cc-cvv">Postcode</label>
                                <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
                                <div class="invalid-feedback">
                                    Security code required
                                </div>
                            </div>
                        </div>
                        <hr class="mb-4">
                        <button class="btn btn-primary btn-lg btn-block" href="index.php" type="submit">Continue to checkout</button>
                    </form>

Answer 1

在单选按钮上添加一个事件侦听器，如果在地址DIV上单击该事件侦听器，则添加一个新类“隐藏”。添加用于隐藏的CSS，因此它将不可见。
对于第二个单选按钮，请执行相同的操作，只是删除而不是添加此类。这样您可以再次显示。

顺便说一句，千万不要使用id里面带有空格的ID，否则它将无法正常工作。对于收音机，我进行了更改。

let mainAdress= document.getElementById("Main_address");
mainAdress.addEventListener('click', function() {
    document.getElementById("address").classList.add('hide');
});

let otherAdress= document.getElementById("Other_address");
otherAdress.addEventListener('click', function() {
    document.getElementById("address").classList.remove('hide');
});

.hide { visibility: hidden; }

<form class="needs-validation" novalidate>
  <!--was-validated -->
  <div class="d-block my-3">
    <div class="custom-control custom-radio">
      <input id="Main_address" name="paymentMethod" type="radio" class="custom-control-input" required>
      <label class="custom-control-label" for="Main address">Main address</label>
    </div>
    <div class="custom-control custom-radio">
      <input id="Other_address" name="paymentMethod" type="radio" class="custom-control-input" required>
      <label class="custom-control-label" for="Other address">Other address</label>
    </div>
  </div>
  <div class="row" id ='address'>
    <div class="col-md-6 mb-3">
      <label for="cc-name">Address</label>
      <input type="text" class="form-control" id="cc-name" placeholder="" required>
      <small class="text-muted">Please enter your other address.</small>
      <div class="invalid-feedback">
        Name on card is required
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="cc-expiration">City</label>
      <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
      <div class="invalid-feedback">
        Expiration date required
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="cc-cvv">Postcode</label>
      <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
      <div class="invalid-feedback">
        Security code required
      </div>
    </div>
  </div>
  <hr class="mb-4">
  <button class="btn btn-primary btn-lg btn-block" href="index.php" type="submit">Continue to checkout</button>
</form>

Answer 2

类似的事情应该起作用：

radioButton.addEventListener('change', () => {
    radioButton.value === 'on' ? input.disabled = true : input.disabled = false;
})

Answer 3

您还可以默认禁用其他地址输入，并在按下另一个地址单选按钮后添加事件侦听器以对其进行更改。在这种情况下，除非您需要它，否则您不想将其隐藏。

如何通过单击单选按钮来禁用表单输入？

3 个答案: