jQuery addClass example

Change class name on click in jQuery

by user20556

HTML

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

JavaScript

$(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;
    }
  });
});