需要帮助将文本输入和单选按钮链接在一起

Question

所以我正在编写CSS，并且我有一个由五个单选按钮和一个输入组成的网格。它应该是小费计算器的一部分，在这个特定部分中您可以选择小费百分比。使用单选按钮，您一次只能选择一个。

但是，我不完全确定如何在没有 JavaScript 的情况下将输入与单选按钮链接起来。例如，如果用户输入自定义提示，我不希望他们在没有首先清除自定义输入的情况下单击其他按钮。没有JS可以吗？

这是我的代码：

input {
  font-family      : spaceMonoBold, sans-serif;
  width            : 100%;
  border           : none;
  background-color : var(--very-light-grayish-cyan);
  font-size        : 1.5rem;
  font-weight      : bold;
  text-align       : right;
  color            : var(--very-dark-cyan);
  padding          : .35rem 1rem;
  border-radius    : .25rem;
  }
.tip-button {
  display          : none;
  }
.tip-span {
  min-width        : 100%;
  height           : 100%;
  text-align       : center;
  display          : flex;
  justify-content  : center;
  align-items      : center;
  background-color : var(--very-dark-cyan);
  color            : var(--white);
  font-size        : 1.5rem;
  border-radius    : .25rem;
  cursor           : pointer;
  transition       : .1s;
  }
input:hover + .tip-span {
  background-color : var(--light-grayish-cyan);
  color            : var(--very-dark-cyan);
  }
input:active + .tip-span {
  transform        : scale(.9);
  transform        : rotate(3deg);
  }
input:checked + .tip-span {
  background-color : var(--strong-cyan);
  color            : var(--very-dark-cyan);
  }

<div class="input-wrapper tip-section">
  <label class="tip-header" for="">Select Tip %</label>
  <div class="tip-button-container">
    <label class="tip-label" for="5">
      <input type="radio" id="5" name="radio" class="tip-button">
      <span class="tip-span">5%</span>
    </label>
    <label class="tip-label" for="10">
      <input type="radio" id="10" name="radio" class="tip-button">
      <span class="tip-span">10%</span>
    </label>
    <label class="tip-label" for="15">
      <input type="radio" id="15" name="radio" class="tip-button">
      <span class="tip-span">15%</span>
    </label>
    <label class="tip-label" for="25">
      <input type="radio" id="25" name="radio" class="tip-button">
      <span class="tip-span">25%</span>
    </label>
    <label class="tip-label" for="50">
      <input type="radio" id="50" name="radio" class="tip-button">
      <span class="tip-span">50%</span>
    </label>
    <label for="custom" class="tip-label custom-label">
      <input type="radio" name="radio" class="tip-button">
      <input id="custom" name="radio" class="custom-tip" type="number" placeholder="Custom">
    </label>
  </div>
</div>

我尝试使用已检查的伪类，但无法使其工作。

Answer 1

如果没有 Javascript，你就无法实现这一点，这是一个实现此功能的 JS 脚本：

document.addEventListener('DOMContentLoaded', function() {
    const customTipInputField = document.getElementById('custom');
    const radioButtons = document.querySelectorAll('input.tip-button[type="radio"]');

    // Function to disable or enable radio buttons based on custom input value
    function toggleRadioButtons(disabled) {
        radioButtons.forEach(radio => {
            radio.disabled = disabled;
            const label = radio.nextElementSibling;
            if (disabled) label.style.cursor = 'not-allowed';
            else label.style.cursor = 'pointer';
        });
    }

    // Event listener for the custom tip input
    customTipInputField.addEventListener('input', function() {
        const customValue = customTipInputField.value;
        toggleRadioButtons(customValue !== '');
    });

    // Event listener for the radio buttons
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.checked) {
                customTipInputField.value = '';
                toggleRadioButtons(false);
            }
        });
    });
});