javascript - JQuery:停止同步输入

Question

我正在尝试在使用

选中单选按钮时同步输入字段

$("#input1").on("input", function() {
   $("#input2").prop('value', this.value);
});

但是，当取消选中单选按钮时，同步将继续。

当条件不再满足时，如何停止同步？

我创建了一个 Fiddle

$(function() {
  $('#foobar input[type=radio]').change(function() {
    switch ($(this).val()) {
      case 'cubic':
        $("#metricavalue").prop("readonly", false);
        $("#metricbvalue").prop("readonly", true);
        $("#metriccvalue").prop("readonly", true);

        $("#metricavalue").css({
          'background-color': '#FFFFFF'
        });
        $("#metricbvalue").css({
          'background-color': '#DCDCDC'
        });
        $("#metriccvalue").css({
          'background-color': '#DCDCDC'
        });

        $("#metricbvalue").prop("value", $("#metricavalue").val());
        $("#metriccvalue").prop("value", $("#metricavalue").val());

        $("#metricavalue").on("input", function() {
          $("#metricbvalue").prop('value', this.value);
          $("#metriccvalue").prop('value', this.value);
        });
        break;
      case 'hexagonal':
        $("#metricavalue").prop("readonly", false);
        $("#metricbvalue").prop("readonly", true);
        $("#metriccvalue").prop("readonly", false);

        $("#metricavalue").css({
          'background-color': '#FFFFFF'
        });
        $("#metricbvalue").css({
          'background-color': '#DCDCDC'
        });
        $("#metriccvalue").css({
          'background-color': '#FFFFFF'
        });

        $("#metricavalue").on("input", function() {
          $("#metricbvalue").prop('value', this.value);
        });
        break;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="foobar">
  <input type="radio" name="crystalsystem" id="cubic" value="cubic">
  cubic <br />

  <input type="radio" name="crystalsystem" id="hexagonal" value="hexagonal">
  hexagonal
</fieldset>


<p>&nbsp;</p>

<i>a</i> value:
<input type="number" name="metrica" id="metricavalue"><br />

<i>b</i> value:
<input type="number" name="metricb" id="metricbvalue"><br />

<i>c</i> value:
<input type="number" name="metricc" id="metriccvalue">

• 选择立方体，为“a”提供一个数值:b 和 c 将与“a”同步。
• 选择六边形，更改'a'，'c'仍将与'a'同步。

如何阻止“c”依赖于“a”？

Answer 1

您好，您需要使用 off() ^*1 与 input event ^*2 为了阻止这种行为

*1

The .off() method removes event handlers that were attached with .on(). See the discussion of delegated and directly bound events on that page for more information. Calling .off() with no arguments removes all handlers attached to the elements. Specific event handlers can be removed on elements by providing combinations of event names, namespaces, selectors, or handler function names. When multiple filtering arguments are given, all of the arguments provided must match for the event handler to be removed.

*2

.off(event)

这是片段:

$(function() {
  $('#foobar input[type=radio]').change(function() {
    switch ($(this).val()) {
      case 'cubic': $("#metricavalue").prop("readonly", false);
      $("#metricbvalue").prop("readonly", true);
      $("#metriccvalue").prop("readonly", true);
      $("#metricavalue").css( {
        'background-color': '#FFFFFF'
      }
      );
      $("#metricbvalue").css( {
        'background-color': '#DCDCDC'
      }
      );
      $("#metriccvalue").css( {
        'background-color': '#DCDCDC'
      }
      );
      $("#metricbvalue").prop("value", $("#metricavalue").val());
      $("#metriccvalue").prop("value", $("#metricavalue").val());
      $("#metricavalue").on("input", function() {
        $("#metricbvalue").prop('value', this.value);
        $("#metriccvalue").prop('value', this.value);
      }
      );
      break;
      case 'hexagonal' : $("#metricavalue").prop("readonly", false);
      $("#metricbvalue").prop("readonly", true);
      $("#metriccvalue").prop("readonly", false);
      $("#metricavalue").css( {
        'background-color': '#FFFFFF'
      }
      );
      $("#metricbvalue").css( {
        'background-color': '#DCDCDC'
      }
      );
      $("#metriccvalue").css( {
        'background-color': '#FFFFFF'
      }
      );
      $("#metricavalue").off('input').on("input", function() {
        $("#metricbvalue").prop('value', this.value);
      }
      );
      break;
    }
  }
  );
}

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="foobar">
  <input type="radio" name="crystalsystem" id="cubic" value="cubic"> cubic <br />

  <input type="radio" name="crystalsystem" id="hexagonal" value="hexagonal"> hexagonal
</fieldset>


<p>&nbsp;</p>

<i>a</i> value:
<input type="number" name="metrica" id="metricavalue"><br />

<i>b</i> value:
<input type="number" name="metricb" id="metricbvalue"><br />

<i>c</i> value:
<input type="number" name="metricc" id="metriccvalue">