Когда я использую событие keyup jQuery для поля, я хочу отключить все поля, кроме поля, к которому я обращаюсь, также, если мое поле пустое, все поля формы должны быть включены.

Это html-код:

<form id="myform">
    <div class="form-group col-xs-4 col-md-4">
        <label for="customernumber" class="control-label">Customer Number</label>
        <input type="number" class="form-control" id="customer-number" />
    </div>
    <div class="form-group col-xs-5 col-md-5">
        <label for="surname" class="control-label">Surname</label>
        <input type="text" class="form-control" id="surname" />
    </div>
    <div class="form-group col-xs-2 col-md-2">
        <label for="datebirth" class="control-label">Date of Birth</label>
        <div class='input-group date' id="datetimepicker1">
            <input type='text' class="form-control" id="date-birth" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>                      
    </div>
</form>

Это код js:

$("#customer-number").keyup(function() {
    $("#myform :input").prop("disabled", true);
})

Как могло это сделать?

Благодарность,

2
Eladerezador 16 Дек 2015 в 19:47

3 ответа

Лучший ответ

Если вы хотите отрицать элемент input, который имеет текущий фокус, вы можете использовать селектор $("#myform :input:not(:focus)") или $("#myform :input").not(this).

Кроме того, если вы также хотите отключить другие поля в зависимости от того, имеет ли текущий элемент input значение, установите свойство disabled на основе длины значения текущего элемента:

Пример здесь

$("#customer-number").on('input', function() {
    $("#myform :input:not(:focus)").prop("disabled", this.value.length);
});

Я также изменил событие keyup на событие input, чтобы событие вызывалось при каждом изменении значения, а не при нажатии клавиши.

3
Josh Crozier 16 Дек 2015 в 16:53

Как это вы ищете ..? Если он пуст, он не должен быть отключен. в противном случае это должно ...

$("#myform :input").keyup(function() {
    $("#myform :input").each(function(){
      if($(this).val() !== ''){
      $(this).prop("disabled", true);
      }
      
    });
  $(this).prop("disabled",false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
    <div class="form-group col-xs-4 col-md-4">
        <label for="customernumber" class="control-label">Customer Number</label>
        <input type="number" class="form-control" id="customer-number" />
    </div>
    <div class="form-group col-xs-5 col-md-5">
        <label for="surname" class="control-label">Surname</label>
        <input type="text" class="form-control" id="surname" />
    </div>
    <div class="form-group col-xs-2 col-md-2">
        <label for="datebirth" class="control-label">Date of Birth</label>
        <div class='input-group date' id="datetimepicker1">
            <input type='text' class="form-control" id="date-birth" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>                      
    </div>
</form>
0
Divesh Oswal 16 Дек 2015 в 17:10

Это один способ:

$("#customer-number").keyup(function() 
{
    $("#myform input").each(function()
    {
        $(this).prop("disabled", true);
    });
});

Функция Each проходит через все входные данные в #myform, а $(this) внутри функции each ссылается на текущий элемент, который проходит через цикл.

0
Piwwoli 16 Дек 2015 в 16:51