如何刪除相關的文本字段在這種情況下輸入

Question

我有5個文本字段的值取決於它的先行者（彼此）。

說

T1，T2，T3，T4，T5

我requiremnt是說，如果文本字段的一個是空的，然後我要我做的所有successdors空。

如果T2是由空，則使T3，T4，T5空

同樣

如果T3是由空，則使T4，T5空

如果T4使空T5空

<div data-role="fieldcontain"> 

<label for="name">T1 Category:</label> 
    <input type="text" name="name" id="t1cat" value="" onkeypress="return nospecialCharacters(event)" placeholder="T1" autocomplete="off" /></br> 

<label for="name">T2 Category:</label> 
<input type="text" name="name" id="t2cat" value="" onkeypress="return nospecialCharactersforT2(event)" placeholder="T2" autocomplete="off" /></br> 

<label for="name">T3 Category:</label> 
<input type="text" name="name" id="t3cat" value="" onkeypress="return nospecialCharactersforT3(event)" placeholder="T3" autocomplete="off" /></br> 

<label for="name">T4 Category:</label> 
<input type="text" name="name" id="t4cat" value="" onkeypress="return nospecialCharactersforT4(event)" placeholder="T4" autocomplete="off" /></br> 

<label for="name">T5 Category:</label> 
<input type="text" name="name" id="t5cat" value="" onkeypress="return nospecialCharactersforT5(event)" placeholder="T5" autocomplete="off" /></br> 

    <input type="button" class= "btn blue" value="Request For This Category" id="requestcatbtn"/> 

</div> 

function nospecialCharacters(e) { 

     if (e.which == 38 || e.which==64) 
      return false; 

} 


function nospecialCharactersforT2(e) { 

    var T1 = $('#t1cat').val(); 

     if (e.which == 38 || e.which==64 || T1=='') 
      return false; 

} 

function nospecialCharactersforT3(e) { 

    var T2 = $('#t2cat').val(); 

     if (e.which == 38 || e.which==64 || T2=='') 
      return false; 

} 

function nospecialCharactersforT4(e) { 

    var T3 = $('#t3cat').val(); 

     if (e.which == 38 || e.which==64 || T3=='') 
      return false; 

} 

function nospecialCharactersforT5(e) { 

    var T4 = $('#t4cat').val(); 

     if (e.which == 38 || e.which==64 || T4=='') 
      return false; 

} 

http://jsfiddle.net/5odssxkq/2/

Answer 1

<div id="divCategory" data-role="fieldcontain"> 
    <label for="name">T1 Category:</label> 
    <input data-category="0" type="text" name="name" id="t1cat" value="A" onkeypress="return nospecialCharacters(event, this)" placeholder="T1" autocomplete="off" /> 
    <br /> 

    <label for="name">T2 Category:</label> 
    <input data-category="1" type="text" name="name" id="t2cat" value="" onkeypress="return nospecialCharacters(event, this)" placeholder="T2" autocomplete="off" /> 
    <br /> 

    <label for="name">T3 Category:</label> 
    <input data-category="2" type="text" name="name" id="t3cat" value="C" onkeypress="return nospecialCharacters(event, this)" placeholder="T3" autocomplete="off" /> 
    <br /> 

    <label for="name">T4 Category:</label> 
    <input data-category="3" type="text" name="name" id="t4cat" value="D" onkeypress="return nospecialCharacters(event, this)" placeholder="T4" autocomplete="off" /> 
    <br /> 

    <label for="name">T5 Category:</label> 
    <input data-category="4" type="text" name="name" id="t5cat" value="e" onkeypress="return nospecialCharacters(event, this)" placeholder="T5" autocomplete="off" /> 
    <br /> 

    <input type="button" class="btn blue" value="Request For This Category" id="requestcatbtn" /> 
</div> 



<script src="../Scripts/jquery-1.8.2.min.js"></script> 
<script type="text/javascript"> 
    var $categoryCount = 0; 
    var $divCategoryObj; 
    $(document).ready(function() { 
     $divCategoryObj = $('#divCategory'); 
     $categoryCount = $divCategoryObj.find('[data-category]').length; 

     recheckSubCategory(); 

     $divCategoryObj.on('keyup', '[data-category]', function (e) { 
      recheckSubCategory(); 
     }); 
    }); 

    //function recheckSubCategory() { 
    // for (var i = 0; i < $categoryCount; i++) { 
    //  var $obj = $divCategoryObj.find('[data-category="' + i + '"]'); 
    //  if ($obj.val().length == 0) { 
    //   $obj.nextAll('[data-category]').val(''); 
    //   break; 
    //  } 
    // } 
    //}; 

    //Or 

    function recheckSubCategory() { 
     for (var i = 0; i < $categoryCount; i++) { 
      var $obj = $divCategoryObj.find('[data-category="' + i + '"]'); 
      if ($obj.val().length == 0) { 
       while (++i < $categoryCount) { 
        $obj.nextAll('[data-category="' + i + '"]').val(''); 
       } 
      } 
     } 
    }; 

    function nospecialCharacters(e) { 
     if (e.which == 38 || e.which == 64) 
     { return false; } 
    }; 

    //function nospecialCharactersforEmptyVal(e, obj) { 
    // var objVal = $(obj).val(); 
    // if (e.which == 38 || e.which == 64 || objVal == '') 
    // { return false; } 
    //}; 
</script> 

Answer 2

您可以嘗試使用.nextAll()方法。

$('input').change(function(){ 
    if($(this).val() == ''){ 
     $(this).nextAll('input[type="text"]').val(''); 
    } 
}); 

http://jsfiddle.net/5odssxkq/3/

http://api.jquery.com/change/

希望這有助於！