访问和禁用动态创建的字段

时间：2014-04-23 09:25:39

标签： javascript jquery

我创建了一个动态表单（按“Hinzufügen”按钮添加表单字段。）

但是我需要一些功能并与之相处： - （

动态创建也可以正常发布，因为数组工作正常。

但是现在我需要在创建新字段时禁用某些字段，但我找不到选择器来处理它......

我想做什么：

创建新字段时，应禁用之前字段中的所有“von”(data[?][von])和“bis”(data[?][bis])字段。

在新字段中，“von”字段应包含最后一个“bis”字段的数据，并且也应禁用。

以下是代码：

$(document).ready(function() {
    var MaxInputs       = 100; //maximum input boxes allowed
    var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton       = $("#AddMoreFileBox"); //Add button ID
    var submit1       = $("#submit"); 

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount=1; //to keep track of text box added

    $(submit1).click(function (e)  //on add input button click
    {
        $("#abser").submit(); 
    });

    $(AddButton).click(function (e)  //on add input button click
    {
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"><label><font color="#FFFFFF">Weg:</font></label></div><div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"><p><table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" ><tr class="tablebg"><td ><label class="inline">Von:</label><input name="data['+ FieldCount +'][von]" type="text"   class="text nextto" /></td><td><label class="inline">Bis:</label><input name="data['+ FieldCount +'][bis]" type="text" class="text nextto" /></td></tr></table></p><p><label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;<select name="data['+ FieldCount +'][art]" class="text nextto"><option value="Ortsaugenschein">Ortsaugenschein</option></select></p><p><label class="inline">Ort:</label><input name="data['+ FieldCount +'][ort]" type="text" class="text inline" /></p><p><label class="inline">Detail:</label></br><textarea name="data['+ FieldCount +'][detail]"></textarea></p></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    }) 
});

<center><h6>Absenz erfassen</h6></center>
<div class="grid_12">
    <div class="grid_3">&nbsp;</div>
    <div class="grid_6">
        <form id="abser" action="addon/absdb/testpost.php"  method="post">
            <label class="inline">Datum:</label>
            <input type="hidden" name="datum" id="dtp_input2" value="" />
            <div id="InputsWrapper">
                <div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;">
                    <label><font color="#FFFFFF">Weg:</font></label>
                </div>
                <div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE">
                    <p>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" >
                            <tr class="tablebg">
                                <td>
                                    <label class="inline">Von:</label><input name="data[1][von]" type="text"   class="text nextto" />
                                </td>
                                <td>
                                    <label class="inline">Bis:</label><input name="data[1][bis]" type="text" class="text nextto" />
                                </td>
                            </tr>
                        </table>
                    </p>
                    <p>
                        <label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;
                        <select name="data[1][art]" class="text nextto">
                            <option value="Ortsaugenschein">Ortsaugenschein</option>
                        </select>
                    </p>
                    <p>
                        <label class="inline">Ort:</label>
                        <input name="data[1][ort]" type="text" class="text inline" />
                    </p>
                    <p>
                        <label class="inline">Detail:</label>
                        </br>
                        <textarea name="data[1][detail]"></textarea>
                    </p>
                </div>
            </div>
            <p>
                <input type="submit" class="submit" id="AddMoreFileBox" value="Hinzufügen" />
                <input type="submit" class="submit" id="submit" value="Speichern" />
            </p>
        </form>
    </div>
    <div class="grid_3">
        &nbsp;
    </div>
</div>

1 个答案:

答案 0 :(得分：0)

现在它的工作原理如下： - ）

感谢帮助!!! 

$(document).ready(function() {

var MaxInputs       = 100; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreFileBox"); //Add button ID
var submit1       = $("#submit");  
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

 $(submit1).click(function (e)  //on add input button click
 {
    $("#abser").submit(); 
 });

$(AddButton).click(function (e)  //on add input button click
 {
     $('input[name$="[von]"]').attr('disabled', 'disabled');
     $('input[name$="[bis]"]').attr('disabled', 'disabled');

         if(x <= MaxInputs) //max input box allowed
         {
             FieldCount++; //text box added increment
             //add input box
             var lastfield = FieldCount-1;
             var lasttime = $('input[name$="['+ lastfield +'][bis]"]').val();
             $(InputsWrapper).append('<div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"><label><font color="#FFFFFF">Weg:</font></label></div><div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"><p><table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" ><tr class="tablebg"><td ><label class="inline">Von:</label><input name="data['+ FieldCount +'][von]" type="text" value="'+ lasttime +'"  disabled="disabled"  class="text nextto" /></td><td><label class="inline">Bis:</label><input name="data['+ FieldCount +'][bis]" type="text" class="text nextto" /></td></tr></table></p><p><label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;<select name="data['+ FieldCount +'][art]" class="text nextto"><option value="Ortsaugenschein">Ortsaugenschein</option></select></p><p><label class="inline">Ort:</label><input name="data['+ FieldCount +'][ort]" type="text" class="text inline" /></p><p><label class="inline">Detail:</label></br><textarea name="data['+ FieldCount +'][detail]"></textarea></p></div>');
             x++; //text box increment
         }

 return false;

 });

$("body").on("click",".removeclass", function(e){ //user click on remove text
         if( x > 1 ) {
                 $(this).parent('div').remove(); //remove text box
                 x--; //decrement textbox
         }
 return false;
 }) 
});

<center><h6>Absenz erfassen</h6></center>



<div class="grid_12">
<div class="grid_3">&nbsp;</div>
<div class="grid_6">

<form id="abser" action="addon/absdb/testpost.php"  method="post">


<label class="inline">Datum:</label>

<div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input size="16" type="text" value=""  readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" name="datum" id="dtp_input2" value="" />

<div id="InputsWrapper">

<div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"><label><font color="#FFFFFF">Weg:</font></label>

</div><div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"><p><table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" ><tr class="tablebg"><td >

<label class="inline">Von:</label><input name="data[1][von]" type="text"   class="text nextto" />


</td><td>

<label class="inline">Bis:</label><input name="data[1][bis]" type="text" class="text nextto" />

</td></tr></table></p><p>

<label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;<select name="data[1][art]" class="text nextto">

<option value="Ortsaugenschein">Ortsaugenschein</option></select>

</p><p>

<label class="inline">Ort:</label><input name="data[1][ort]" type="text" class="text inline" />

</p><p>

<label class="inline">Detail:</label></br><textarea name="data[1][detail]"></textarea>

</p></div>


</div>

<p>

<input type="submit" class="submit" id="AddMoreFileBox" value="Hinzufügen" />
<input type="submit" class="submit" id="submit" value="Speichern" />
</p>
</form>

</div>

<div class="grid_3">
&nbsp;
</div>

</div>
相关问题
最新问题