텍스트 상자가 비어 있는지 확인한 다음 속성을 넣습니다.

Question

텍스트 상자 (4)가 채워져 있으면 다른 텍스트 상자를 비활성화하십시오. 내 div에 여러 텍스트 상자가 있습니다.

예 : 텍스트 상자 (4)에 텍스트를 넣으면 텍스트 상자 (1)가 비활성화됩니다. 그런 다음 텍스트 상자 (4)의 텍스트를 제거하면 텍스트 상자 (1)의 텍스트 상자가 활성화됩니다. 나는 내 코드 뭐가 잘못 됐는지 모르겠어요,

<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> 

내 코드가 작동하는 것 같다하지 않습니다 여기에

샘플 HTML입니다.

가 여기 내 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

좋아, 그래서 몇 가지 문제.

먼저 텍스트 상자 중 하나가 변경 될 때마다 코드를 실행해야합니다. 해당 기능을 함수로 랩핑하여 각 텍스트 상자의 변경 이벤트에 추가 할 수 있습니다. 아래 예제를 추가했습니다. 주의 사항은 각 텍스트 상자에 변경 사항을 명시 적으로 추가하는 것보다 훨씬 좋을 수 있지만 그 일을 맡길 것입니다.

두 번째로 jquery 래퍼 ($ (name.length> = 1))에서 길이가 0보다 큰 경우 비교를 실행했습니다. ->하지 마십시오. 코드 샘플에서도이를 제거했습니다.

셋째로 나는 요구 사항에 약간 혼란 스럽습니다. 첫 번째 텍스트 상자 만 비활성화 또는 비활성화하지 않으시겠습니까? 코드를 읽으면 달성하려는 것처럼 보입니다. 나머지 텍스트 상자를 모두 비활성화하려면 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/