如何控制填充數據，如果它的預填充文本字段爲空

Question

我有5個文本字段，我如何控制用戶在文本字段中輸入數據。

意味着如果文本字段1是空的

用戶不能輸入在文本字段3的數據，如果文本字段1和文本字段2是空

用戶不能在文本字段4輸入數據用戶不能在文本字段2輸入的數據，如果文本字段3和文字欄是空的

用戶無法進入文字欄的數據，如果文字欄和文字欄是空的

<div data-role="fieldcontain"> 

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

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

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

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

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

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

</div> 

http://jsfiddle.net/2jfmzsdf/

我只是需要你如何完成這一點。（我不想麻煩確切的答案）

Answer 1

首先不要使用'br'元素，而是使用CSS。 這裏是一個工作Fiddle

HTML：

<ul data-role="fieldcontain"> 
    <li> 
    <label for="name">T1 Category:</label> 
    <input type="text" class="inputFields" name="name" id="t1cat" value="" placeholder="T1" /> 
    </li> 
    <li> 
    <label for="name">T2 Category:</label> 
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t2cat" value="" placeholder="T2" /> 
    </li> 
    <li> 
    <label for="name">T3 Category:</label> 
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t3cat" value="" placeholder="T3" /> 
    </li> 
    <li> 
    <label for="name">T4 Category:</label> 
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t4cat" value="" placeholder="T4" /> 
    </li> 
    <li> 
    <label for="name">T5 Category:</label> 
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t5cat" value="" placeholder="T5" /> 
    </li> 
    <li> 
    <input type="button" class="btn blue" value="Request For This Category" id="requestcatbtn" /> 
    </li> 
</ul> 

正如你可以看到我用了一個列表，方便的造型和更好的概述。此外，我給每個輸入一個類和一個禁用的屬性（除了第一個）。

CSS：

li { 
    display: block; 
} 

JS：如果你注重/事件的內容的inputfield

$('.inputFields').blur(function() { 
    if ($(this).val() != '') { 
    $(this).parent().next().find('input').attr('disabled', false); 
    } else { 
    $(this).parent().next().find('input').attr('disabled', 'disabled'); 
    } 
}); 

這基本上是JS檢查。如果它的值不爲空，它將從下一個輸入中刪除禁用的屬性，反之亦然。

希望這會有所幫助。你可以調整JS內部的邏輯。這只是一個例子。如果你想以前的所有元素來填充你可以簡單地添加到您的js ..

Answer 2

關於使用jQuery的.prev()方法查找緊前面的<input />元素如何sugegstions？

.prev()帶有過濾器（documentation），所以我想你可以問它不是簡單地對前面的元素（這可能是一個<label>），但專門針對前面<input />元素。

使用.previousSibling()（documentation），您也可以使用原生JavaScript輕鬆實現。

一旦你有了以前的<input />它將是相當微不足道的檢查它的值有一個非零長度。

Answer 3

您的解決方案可能是：DEMO

$('input.txtBox').on('keyup', function(){ 
 
    var next = $(this).next('input.txtBox'); 
 
    if (next.length) { 
 
     if ($.trim($(this).val()) != '') next.removeAttr('disabled'); 
 
     else { 
 
      var nextAll = $(this).nextAll('input.txtBox'); 
 
      nextAll.attr('disabled', 'disabled'); 
 
      nextAll.val(''); 
 
     } 
 
    } 
 
}) 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" class="txtBox" required="required" placeholder="T1"/> 
 
    <input type="text" class="txtBox" disabled="disabled" placeholder="T2" /> 
 
    <input type="text" class="txtBox" disabled="disabled" placeholder="T3" /> 
 
    <input type="text" class="txtBox" disabled="disabled" placeholder="T4" /> 
 
    <input type="text" class="txtBox" disabled="disabled" placeholder="T5" /> 
 
    <input type="submit" /> 
 
</form>