Question

这是我的HTML代码。我使用Jasny bootstrap进行图片上传，Bootstrap-Switch确实得到了iOS风格的开关盒。

默认情况下，我想：

禁用Div #one中除第一个开关盒外的所有元素。（开始时处于不确定状态）
当用户将第一个元素轻弹至开启或关闭时，下一个输入字段将变为启用状态。
等等。

基本上，我希望用户必须按顺序填写表单。

并非所有字段都是复选框。从这个例子可以看出，有一个图像上传表单，我希望以相同的方式工作 - 禁用直到它完成之前的字段，然后启用。一旦上传了图像，然后启用下一个输入字段，依此类推。

我可以使用任何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）变量＆＃34; nodeList＆＃34;是包含所有Bootstrap开关盒的DIV 2）变量＆＃34; nodeList []＆＃34; - ＆GT;在每个nodeList [i]（i-> 0,1,2,3 ....）中包含一个Bootstrap开关盒 3）下一步：在每个nodeList [i]，我们将搜索任何输入标签（或元素）。如果该开关盒中有多个输入字段，它将自动检测它们。 4）禁用所有输入字段，但输入字段在＆＃34; FIRST＆＃34;自举开关盒。！这只适用于＆＃34;输入＆＃34;标签！ 5）每个Bootstrap开关盒的<input>量将保存为JavaScript对象以供日后使用 6）第一个Switch Box的<input>（未被禁用）被放置＆＃34;监视＆＃34;。如果它的价值发生了变化，那同样的输入就不会出现在监视和＃34;再过，然后通过使用javascript对象（变量），它将检查同一个Switch Box中的所有其他<input>之前是否已经更改过。如果是，则下一个Bootstrap交换机盒上的所有<input>都将启用。 7）下一个开关盒上的<input>已启用，依此类推......

奖励：此代码适用于任何类型的输入+您在该特定Bootstrap开关盒中的任何数量的输入+您拥有的任何数量的Bootstrap开关盒!!!

禁用div中的所有输入元素，并逐个启用它们

2 个答案: