如何以“或”或“或”形式验证单选按钮字段？

Question

我在网页上也有一个带有其他字段的无线电表格元素，有两种类型的表格无线电字段，一种是蔬菜，另一种是肉。我想像这样选择：“如果他们选择一种肉，则必须选择一种素食，但是如果他们仅选择一种素食，则不必选择一种肉”，这是这些广播字段的屏幕截图http://prntscr.com/nhu6ao

jQuery('.radio').change(function() {
  jQuery(this).parent().removeClass('error');
  jQuery(this).parent().parent().removeClass('error');
  if (jQuery(this).hasClass('box-input')) {
    jQuery('#preseason-error').slideUp("slow");
    jQuery('#preseason-title').css("color", "#444");
    jQuery('.boxes-select').removeClass('error');
  }
})

结果将是：如果他们选择一种肉，则必须选择一种素食，但是如果他们仅选择一种素食，则不必选择一种肉

Answer 1

Voila！

我为您准备了一个简单的示例。在开始之前，我想指出两点。像调用.on('.radio')一样，为每个表单元素创建事件侦听器的效率非常低。此处的一种最佳做法是在表单（或任何其他包装元素（甚至body））上添加事件侦听器，而不是使用event.target作为对用户刚刚单击的表单元素的引用。

另一件事是，从用户体验的角度来看，我建议将肉类菜肴移至蔬菜类之上，因为如果蔬菜某种程度上依赖于肉类，将其作为首选是没有道理的。

JSfiddle的工作示例：https://jsfiddle.net/mkbctrlll/7209ayr3/45/

const $meals = $('#meal-options')

$meals.on('change', function(event) {
    if(event.target.name === 'meat') {
    console.log('Meat selected!')
    $('input[name="veggie"]').attr('required', 'true')
  }
})

<form id="meal-options">
  <h2>
    Meat options
  </h2>

  <label for="radio-1">
    <input id="radio-1" name="meat" type="radio">
    Meat 1
  </label>

  <label for="radio-2">
    <input id="radio-2" name="meat" type="radio">
    Meat 2
  </label>

  <h2>
    Veggie options
  </h2>

  <label for="radio-3">
    <input id="radio-3" name="veggie" type="radio">
    veggie 1
  </label>

  <label for="radio-4">
    <input id="radio-4" name="veggie" type="radio">
    veggie 2
  </label>

  <label for="radio-5">
    <input id="radio-5" name="veggie" type="radio">
    veggie 3
  </label>

  <input type="submit">
</form>