Как выбрать текущее поле ввода, а затем отключить и очистить следующее (и наоборот)? - PullRequest
Новая
       10

Как выбрать текущее поле ввода, а затем отключить и очистить следующее (и наоборот)?

0 голосов
/ 02 марта 2012

У меня есть форма, которая динамически добавляет строки с 4 полями в каждой.Например:

[Имя] [Описание] [Дебет] [Кредит]

Ожидаемое поведение, которое я пытаюсь выполнить, заключается в том, что пользователь может вводить значение только в поле Дебетили только в поле Кредит, но не в оба.Поэтому, когда пользователь вводит значение в поле «Дебет», поле «Кредит» должно быть отключено и ему должно быть присвоено значение 0 или оно не указано.И наоборот, когда пользователь вводит значение в поле Кредит, поле «Дебет» должно быть отключено и ему должно быть присвоено значение 0 или пусто.И это должно работать на каждой строке, которую добавляет пользователь.Как мне это сделать?

До сих пор я тестировал некоторые альтернативы, но не могу заставить его работать.Вот мой текущий код для этой части.Это только отключает поля, но не очищает или обнуляет следующее или предыдущее: 

<script type="text/javascript">
  var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
    $n('input[name^=credits]').attr("readonly", "readonly");
    $n('input[name^=debits]').removeAttr("readonly");
  });

  $n('input[name^=credits]').live("focus", function(){
    $n('input[name^=debits]').attr("readonly", "readonly");
    $n('input[name^=credits]').removeAttr("readonly");
  });
</script>

Спасибо за любые подсказки.

Ответы [ 4 ]

0 голосов
/ 02 марта 2012

Лично я бы добавил обработчик фокуса к каждому входу, который затем очищает все остальные входные значения и отключает их - что-то вроде этого: 

$('table td input').focus(function(){
    // Blank all inputs first
    $(this).closest('tr').find('input').attr('disabled', 'disabled').val(0);

    // enable the focused field
    $(this).removeAttr('disabled');
});
0 голосов
/ 02 марта 2012 
var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
    $n(this).next('input[name^=credits]').val('').attr("readonly", "readonly");
    $n(this).removeAttr("readonly");
  });
  $n('input[name^=credits]').live("focus", function(){
      $n(this).prev('input[name^=debits]').val('').attr("readonly", "readonly");
    $n(this).removeAttr("readonly");
  });
0 голосов
/ 02 марта 2012

Не имея большого представления о разметке, у меня есть для вас это решение. Возможно, вам придется изменить селектор в зависимости от вашей разметки. 

  var $n = jQuery.noConflict();
  $n('input[name^=debits]').live("focus", function(){  
      $n(this)
      .prop("disabled", false);
      .parent().find('input[name^=credits]')//Assuming it has parent container
      .prop("disabled", true)
      .val(0)
  });

  $n('input[name^=credits]').live("focus", function(){
      $n(this)
      .prop("disabled", false);
      .parent().find('input[name^=debits]')//Assuming it has parent container
      .prop("disabled", true)
      .val(0);
  });

Примечание. Если вы хотите работать с элементами ввода в одной строке, вы должны использовать this в качестве ссылки или контекста, чтобы найти элементы в одной строке. Что вы делали, так это находили все элементы на странице с требуемым селектором. Также, чтобы отключить поле input, вы должны использовать метод prop(), установив для свойства disabled значение true и наоборот, чтобы включить его.

Если вы используете jQuery ver 1.7+, то лучше использовать на , чем live

0 голосов
/ 02 марта 2012

Если вы хотите «очистить» поле, вы должны вызвать .val('') для него

...