Javascript-форум - Странное поведение readonly

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Странное поведение readonly (https://javascript.ru/forum/dom-window/45762-strannoe-povedenie-readonly.html)

Пусть ноль, но мне нужно запретить пользователям ставить в оба поля цену. Одна из них подставляется автоматом....

Простейший калькулятор

Цитата:

Сообщение от ArtemKrass

Одна из них подставляется автоматом....

тогда как они поставят цену если она автоматом. снова непонимаю вас.

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
 $(function () {
      var inputs = $('#1, #2,#3');
      $("body").on('input', inputs, function () {
              var area = parseFloat(inputs[0].value)||0,
              price = parseFloat(inputs[1].value)||0,
              summ = area * price;
              inputs[2].value = summ.toFixed(2)
          });
  });
</script>
</head>

<body>
<label for="1">площадь
<input type="text" id="1" name="1" value="" size="12" maxlength="10" class="form-text required"></label>
       <br />
<label for="2">цена за 1м
<input type="text" id="2" name="2" value="" size="12" maxlength="10" class="form-text required"></label>
       <br />
<label for="3">общая цена
<input type="text" id="3" name="2" value="" size="12" maxlength="10" class="form-text required" readonly="readonly"></label>
</body>

</html>

Вся проблема в том, что изначально пользователь может выбрать какую цену ему вводить, либо за 1 м, либо общую... Как только он ввел цену в какое-то из полей, другое нужно делать readonly.

У меня получилась огромная портянка из условий. Но толком не работает.

Цитата:

Сообщение от ArtemKrass

Как только он ввел цену в какое-то из полей, другое нужно делать readonly

:-?

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
 $(function () {
      var inputs = $('#1, #2, #3');
      $("body").on('input', '#1:not(.disabled), #2:not(.disabled), #3:not(.disabled)', function () {
                if (this.value.length > 0) {
                inputs.not(this).addClass('disabled').prop("readonly", true);
              }
              else {inputs.removeClass('disabled').prop("readonly", false)};
          });
  });
</script>
</head>

<body>
<label for="1">площадь
<input type="text" id="1" name="1" value="" size="12" maxlength="10" class="form-text required"></label>
       <br />
<label for="2">цена за 1м
<input type="text" id="2" name="2" value="" size="12" maxlength="10" class="form-text required"></label>
       <br />
<label for="3">общая цена
<input type="text" id="3" name="2" value="" size="12" maxlength="10" class="form-text required" ></label>
</body>

</html>

Все ли браузеры поддержат такой код? Спасибо большущее за помощь...

Цитата:

Сообщение от ArtemKrass

Все ли браузеры поддержат такой код?

кроме ie ниже 9 http://learn.javascript.ru/events-change#событие-input

рони,
Огромное Спасибо! С меня +++

Цитата:

Сообщение от рони

кроме ie ниже 9

Если писать $("body").on('input propertychange') то должно и в IE8 сработать.