Проверьте, нет ли текстового поля или нет, затем поместите атрибуты

Question

Отключите другое текстовое поле, если заполнено текстовое поле (4). У меня есть несколько текстовых полей в моем div

Например: Если я поместил текст в текстовое поле (4), то текстовое поле (1) станет отключено. Затем, если я удалю текст в текстовом поле (4), текстовое поле для текстового поля (1) станет разрешаемым.

Вот пример HTML:

<div class="main-wrapper"> 
    <div class="form-text-wrapper"> 
    <div><input type="text" class="form-text" value="" name="text1" id="text1"></div> 
    <div><input type="text" class="form-text" value="" name="text2" id="text2"></div> 
    <div><input type="text" class="form-text" value="" name="text3" id="text3"></div> 
    <div><input type="text" class="form-text" value="" name="text4" id="text4"></div> 
    </div> 
</div> 

Мой код не похоже на работу, я не уверен, что случилось с моим кодом.

Вот мой JS код:

$('.main-wrapper').each(function(){ 
    var name = $('#text4', this).val(); 
    var disForm = $('#text1'); 
    if ($(name.length >= 1)) { 
    $(disForm, this).attr('disabled', 'disabled'); 
    } else { 
    $(disForm, this).removeAttr('disabled'); 
    } 
}); 

Пожалуйста, помогите ... Спасибо !!!

Answer 1

jQuery(function($) { 
 
    //change event handler which gets executd whenever the value of #test4 is chaned 
 
    $('#text4').on('change', function() { 
 
    //find all the input elements under the current .form-text-wrapper and except #test4 and set its disabled status based on #text4's value 
 
    $(this).closest('.form-text-wrapper').find('input').not(this).prop('disabled', this.value.length) 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main-wrapper"> 
 
    <div class="form-text-wrapper"> 
 
    <div><input type="text" class="form-text" value="" name="text1" id="text1"></div> 
 
    <div><input type="text" class="form-text" value="" name="text2" id="text2"></div> 
 
    <div><input type="text" class="form-text" value="" name="text3" id="text3"></div> 
 
    <div><input type="text" class="form-text" value="" name="text4" id="text4"></div> 
 
    </div> 
 
</div>

Answer 2

Ok, поэтому несколько вопросов, с тем, что вы делаете.

Во-первых, вам нужно выполнить свой код каждый раз, когда изменяется одно из этих текстовых полей. Вы можете перенести эту функциональность в функцию и добавить ее в событие изменения в каждом из текстовых полей. Я добавил пример ниже. NB пример может быть намного лучше, чем явно добавлять изменения в каждое из текстовых полей, но я оставлю это для вас.

Во-вторых, вы выполняли сравнение, если длина была больше 0 внутри обертки jquery ($ (name.length> = 1)) -> Do not. Я также удалил это в примере кода.

В-третьих, я немного смущен требованием. Вы хотите, чтобы он отключил/не отключил только первое текстовое поле? Выполняя свой код, это то, на что похоже, как вы пытались достичь. Если вы хотите отключить все остальные текстовые поля, функция Arun P Johny сделает то, что вы хотите.

function onTextChange(){ 
    console.log('running'); 
    $('.main-wrapper').each(function(){ 
     var name = $('#text4', this).val(); 
     var disForm = $('#text1'); 
     if (name.length >= 1) { 
     $(disForm, this).attr('disabled', 'disabled'); 
     } else { 
     $(disForm, this).removeAttr('disabled'); 
     } 
    }); 
} 

$('#text1').on('change', onTextChange); 
$('#text2').on('change', onTextChange); 
$('#text3').on('change', onTextChange); 
$('#text4').on('change', onTextChange); 

http://jsfiddle.net/jtgs5kcj/1/