jQuery 对单选按钮状态的反应

Question

我是 JS 和 jQuery 的新手，我现在只想用它实现一个功能。所以我的问题可能看起来很幼稚。

我的 HTML 表单有几行和两列：左列和右列。左列包含与右列相同的所有单选按钮选择。我想让这个单选按钮表单以这样一种方式工作：如果在左栏中做出了特定的选择，则相同的选择必须在右栏中变得不可用（变灰），反之亦然。

下面的 JS/jQuery 脚本应该就是这样做的，但是当取消选择某个单选按钮时如何撤消关联的操作？是否有必要获取一列中的所有表单元素并检查每个元素是否需要 un-greyed-out，或者是否有更简单的方法？

function toggleRadio() {
      left = $("input[type='radio'][class='left_column']:checked");
      left_val = left.val();
      right = $("input[value=" + left_val + "][class='right_column']");
      left.change(function() {
        right.attr('disabled', true);
      }).change();
}

Answer 1

我不能说我完全理解你想做什么。但我希望这个例子对你有用。

HTML

<div class="row">
  <div class="col">

    <div class="form-check">
      <label>
        <input class="form-check-input" type="radio" name="group1" value="rad1" checked>
        Option 1
      </label>
    </div>
    
    <div class="form-check">
      <label>
        <input class="form-check-input" type="radio" name="group1" value="rad2">
        Option 2
      </label>
    </div>
    
    <div class="form-check">
      <label>
        <input class="form-check-input" type="radio" name="group1" value="rad3">
        Option 3
      </label>
    </div>

  </div>
  <div class="col">
  
     <div class="form-check">
      <label>
        <input class="form-check-input" type="radio" name="group2" value="rad1" checked disabled>
        Option 1
      </label>
    </div>
    
    <div class="form-check">
      <label>
        <input class="form-check-input" type="radio" name="group2" value="rad2">
        Option 2
      </label>
    </div>
    
    <div class="form-check">
      <label>
        <input class="form-check-input" type="radio" name="group2" value="rad3">
        Option 3
      </label>
    </div>
  
  </div>
</div>

JS (jQuery)

$(document).ready(function(){

    $("input[type='radio']").change(function(){
  
        var name  = $(this).prop("name"),
          val   = $(this).val(),
          target = (name === "group1") ? 'group2' : 'group1';
          
    $("input[type='radio']").prop("disabled", false);


    $("input[name='" + target + "'][value='" + val + "']")
        .prop("checked", true)
        .prop("disabled", true);
  
  });


}); //doc ready end

演示 https://jsfiddle.net/caneroncel/3vmstpjf/20/

jQuery 对单选按钮状态的反应

Reaction to radio button status with jQuery

javascript

forms

jquery

radio-button