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 событие ^{* 2} , чтобы остановить это поведение

* 1

Метод .off() удаляет обработчики событий, которые были присоединены с .on(). См. Обсуждение делегированных и напрямую связанных событий на этой странице для получения дополнительной информации. Вызов .off() без аргументов удаляет все обработчики, прикрепленные к элементам. Определенные обработчики событий могут быть удалены в элементах, предоставляя комбинации имен событий, пространств имен, селекторов или имен функций обработчиков. Если задано несколько аргументов фильтрации, все предоставленные аргументы должны совпадать для удаления обработчика событий.

* 2

.off (событие)

вот фрагмент:

$(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">