Question

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

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

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

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 对单选按钮状态的反应

1 个答案: