JQuery: stop synchronizing inputs

user_12246432 0
Viewed 58

I'm trying to synchronize input fields when a radio button is checked using 

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

However, when the radio button is unchecked, the synchronization continues.

How can you stop the synchronization when the condition isn't met anymore?

I've created a 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">

  • Select cubic, provide a numerical value for 'a': b and c will be synchronized with 'a'.
  • Select hexagonal, change 'a', and 'c' will still be synchronized with 'a'.

How can you stop 'c' being dependent on 'a'?

html jquery javascript
1 Answers

Hi you need to use off()*1 with input event*2 in order to stop this behavior

*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)

here is the snippet:

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

user_34485270
Related