禁用div中的所有輸入元素，並逐個啓用它們

Question

這是我的HTML代碼。我使用Jasny Bootstrap進行圖片上傳，而Bootstrap-Switch則獲得了iOS風格的開關盒。

默認情況下，我想：

1. 禁用事業部#one每個元素，除了第一個開關盒。 （開始時處於不確定狀態）
2. 當用戶輕觸第一個元素打開或關閉時，下一個輸入字段變爲啓用狀態。
3. 依此類推。

基本上，我希望用戶必須按順序填寫表格。

並非所有的字段都是複選框。正如你可以從這個例子看到的那樣，有一個圖像上傳表單，我想以同樣的方式工作 - 禁用，直到它完成之前的字段，然後啓用。一旦圖像被上傳，然後啓用下一個輸入字段，依此類推。

有沒有我可以用來輕鬆做到這一點的任何jQuery魔術？

<div id="one"> 
    <!-- Bootstrap switch box --> 
    <div class="s-part-question"> 
     <label>X</label> 
     <div> 
      <input name="X1" type="checkbox" class="s-switch-indeterminate s-t-input" 
        data-indeterminate="true" 
        data-on-text="Yes" 
        data-off-text="No" /> 
     </div> 
    </div> 

    <!-- Bootstrap switch box --> 
    <div class="s-part-question"> 
     <label>Y</label> 
     <div> 
      <input name="Y1" type="checkbox" class="s-switch-indeterminate s-t-input" 
        data-indeterminate="true" 
        data-on-text="Yes" 
        data-off-text="No" /> 
     </div> 
    </div> 

    <!-- Image upload --> 
    <div class="fileinput fileinput-new s-part-photo" data-provides="fileinput"> 
     <div class="s-part-photo-explain">Add image</div> 
     <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div> 
     <div> 
      <span class="btn btn-default btn-file"> 
       <span class="fileinput-new">New</span> 
       <span class="fileinput-exists">Change</span> 
       <input class="s-t-input" type="file" name="imageY1"> 
      </span> 
      <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
     </div> 
    </div> 

    <!-- Bootstrap switch box --> 
    <div class="s-part-question"> 
     <label>Z1</label> 
     <div> 
      <input name="Z1" type="checkbox" class="s-switch-indeterminate s-t-input" 
        data-indeterminate="true" 
        data-on-text="Yes" 
        data-off-text="No" /> 
     </div> 
    </div> 
</div> 

    $(".s-switch-indeterminate").bootstrapSwitch({ 
     'state': null 
    }); 

Answer 1

我做了類似的事情，但是我做的方式是在每節之後動態地包含HTML。因此，我將開始與HTML：

<div id="one"> 
    <div id="first"> 
    <!-- Bootstrap switch box --> 
    <div class="s-part-question"> 
     <label>X</label> 
     <div> 
     <input name="X1" type="checkbox" class="s-switch-indeterminate s-t-input" 
       data-indeterminate="true" 
       data-on-text="Yes" 
       data-off-text="No" /> 
     </div> 
    </div> 
    </div> 

    <div id="second"></div> 
    <div id="third"></div> 
    <div id="fourth"></div> 
    etc. 

在那裏我已經添加了每個複選框一個div部分具有自己獨特的ID（第一，第二，第三等）。

然後當複選框發生變化時，您可以使用jQuery檢查它，並用Javascript插入下一節HTML。

$("input[name='X1']").change(function() { 
    document.getElementById("second").innerHTML = '<div class="s-part-question"><label>Y</label><div><input name="Y1" type="checkbox" class="s-switch-indeterminate s-t-input" data-indeterminate="true" data-on-text="Yes" data-off-text="No" /></div></div>' 
} 

然後每個複選框都有其中之一。另外要注意的動態生成的複選框，你必須要做出改變了jQuery選擇如此：

$('#one').on("input[name='Y1']", "change", function() { 

Answer 2

如果我理解正確的話，你希望以下內容：

（1）每DIV元素被禁用，除了第一個。 （2）當用戶檢查第一個DIV中的複選框開啓或關閉（選中或未選中）時，第二個複選框變爲啓用狀態。即使用戶將第一個複選框更改回原來的狀態，第二個複選框也會保持啓用狀態。 （3）然後當第二個複選框被選中時（或者如果已經選中，則取消選中），下一個輸入變爲啓用狀態。 （4）等等...

如果是這樣，接下來的代碼應該有所幫助：

$(document).ready(function(){ 
    var nodeList = document.querySelectorAll("div#one > div");//Selects all DIRECT child elements specified by 「child」 of elements specified by 「parent」. In this case it takes the parent DIV of the switch boxes and all its children (and inner html) "only one level down". 
    //http://api.jquery.com/category/selectors/ 
    var amountInputs = new Array(); 
    for(i=0;i<nodeList.length;i++){ 
     //In each Bootstrap switch box 
     var inputFields = nodeList[i].querySelectorAll("input"); 
     amountInputs[i] = inputFields.length; 
     if(i==0){ 
      putOnSurveillance(inputFields); 
     } else{ 
      for(j=0;j<amountInputs[i];j++){ 
       $(inputFields[j]).attr('disabled','disabled'); 
      } 
     } 
    } 
    jObjects['amountInputs'] = amountInputs; 
}); 

var jObjects = { /* JavaScipt Objects */ 
    current_SwitchBox: 0,//Current switch box index number 
    surveillancePassed: 0 
}; 

function enableNextSwitchBox(){ 
    var nodeList = document.querySelectorAll("div#one > div"); 
    if(jObjects['current_SwitchBox']!=nodeList.length){ 
     var inputFields = nodeList[jObjects['current_SwitchBox']].querySelectorAll("input"); 
     for(l=0;l<inputFields.length;l++) 
      $(inputFields[l]).prop("disabled", false); 
     putOnSurveillance(inputFields); 
    } else{ 
     //No more Switch Boxes to enable!!! 
    } 
} 

function putOnSurveillance(inputs){ 
    for(k=0;k<inputs.length;k++){ 
     $(inputs[k]).change({targetInput: inputs[k]}, function(object) { 
      $(object.data.targetInput).unbind('change');//You are not under "surveillance" anymore... 
      if(jObjects['amountInputs'][jObjects['current_SwitchBox']]==(++jObjects['surveillancePassed'])){ 
       ++jObjects['current_SwitchBox']; 
       jObjects['surveillancePassed'] = 0; 
       enableNextSwitchBox(); 
      } 
     }); 
    } 
} 

說明：

1）變量 「節點列表」 是包含了所有的引導的DIV開關盒 2）每個nodeList [i]（i-> 0,1,2,3 ....）中的變量「nodeList []」 - >包含Bootstrap開關盒 3）下一步：在每個nodeList [i ]，我們將搜索任何輸入標籤（或元素）。如果該開關盒中有多個輸入字段，它將自動檢測它們。 4）禁用所有輸入字段，但禁用「FIRST」Bootstrap開關盒中的輸入字段。 ！這隻適用於「輸入」標籤！ 5）每個Bootstrap開關盒的數量<input>將被保存爲JavaScript對象以備後用 6）第一個開關盒（未被禁用）的<input>被置於「監視」上。如果它的值改變了，同樣的輸入不再是「監視」了，然後通過使用一個JavaScript對象（變量），它將檢查在同一個Switch Box中的所有其他<input>是否已經更改過。 如果是這樣，則下一個Bootstrap開關盒上的所有<input>將變爲啓用狀態。 7）<input>「在下一個開關盒s的啓用等等....

獎勵：此代碼應與任何類型的輸入+你在那個特定的自舉開關盒有任何輸入的工作量+任何數量的Bootstrap開關盒！