Toggle input

JQuery

by Nik Shevchenko

HTML

<input type="text" class="input-one" value="">
<input type="text" class="input-two" value="">

CSS

input {
  border: 3px solid red;
}

input:focus {
  border: 3px solid blue;
}

.active {
  border: 3px solid blue;
}

.unfoc {
  border: 3px solid red;
}

.unfoc:focus {
  border: 3px solid red;
}

JavaScript

var $input = $('.input-one');
var $inputTwo = $('.input-two');

function reuse(value, other) {
  value.change(function() {
    if (value.val() == 0) {
      value.removeClass('active');
      other.prop('readonly', false);
      other.removeClass('unfoc');
    } else {
      value.addClass('active');
      other.prop('readonly', true);
      other.addClass('unfoc');
    };
  });
};

reuse($input, $inputTwo);
reuse($inputTwo, $input);