0
我的問題如下：我有動態div盒，其中我添加了一些輸入字段，包括樣式複選框和隱藏選擇字段。只有當用戶選中旁邊的框時，纔會出現選擇字段。所以當你需要多個div盒（複選框和隱藏的選擇域）並點擊你的輸入時，你點擊「[+]」。我已經嘗試了一些可能的解決方案，但沒有一個似乎可行。目前的狀態是，我可以添加這些包含輸入字段的div，但只有「靜態」一個與該功能一起使用顯示/隱藏選擇字段onclick複選框。附加的總是顯示選擇字段。下面的代碼：顯示/隱藏在附加內容中的複選框上選擇字段
// JAVASCRIPT
$(document).ready(function() {
// DYNAMIC RD ADD
// ROUNDS
// MAXIMUM DIV BOXES ALLOWED
var rd_max_fields = 15;
// FIELDS WRAPPER
var rd_wrapper = $(".rd_input_fields_wrap");
// ADD DIV BUTTON ID
var rd_add_button = $(".rd_add_field_button");
// INITIAL DIV BOX COUNT
var rd_x = 1; //initlal text box count
// ADD DIV CONTAINER
$(rd_add_button).click(function(e){
e.preventDefault();
// MAX DIV ALLOWED
if(rd_x < rd_max_fields){
// DIV BOX INCREMENT
rd_x++;
// ADD INPUT TEXT
$(rd_wrapper).append('<div><table id="addrd" width="385px" "cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;"><tr><th colspan="2"> </th></tr><tr><th colspan="2"><hr class="white-hr" /></th></tr><tr><th colspan="2"> </th></tr></table><a href="#" class="rd_remove_field"><table id="addrd" width="385px" "cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;"><tr><th align="left">Prüfung entfernen</th><th align="right"><font color="#FFD700">[–]</font></th></tr></table></a><tr><th colspan="2"><hr /></th></tr></table><table width="385px" "cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;"><tr><td align="left">Prüfungsnummer<font color="#8E6516">*</font></td><td align="right"><input name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="' + rd_x + '" required="required" /></td></tr><tr><td align="left">Sollzeit<font color="#8E6516">*</font></td><td align="right"><input name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Bsp. ' + Math.floor((Math.random() * 7) + 1) + ':' + Math.floor((Math.random() * 49) + 10) + '" required="required" /></td></tr><tr><td align="left">Zwischenzeit?</td><td align="right"><table width="135px" cellspacing="0" style="border: 0;"><tr><td align="left"><div class="checkboxOne"><input type="checkbox" value="yes" id="checkboxOneInput_' + rd_x + '" name="rd_id[]"/><label for="checkboxOneInput_' + rd_x + '"></label></div></td><td align="right"><select name="rd_id[]" id="rd_id_zz" class="zz" placeholder="Anzahl" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 75px;" ><option selected="selected" disabled="disabled">Zeiten</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td></tr></table></td></tr></tr></table></div>');
}
});
// USER CLICK TO REMOVE DIV
$(rd_wrapper).on("click",".rd_remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove();
rd_x--;
});
// STATIC CHECKBOX
$("#rd_id_zz").hide();
$("#checkboxOneInput").click(function() {
if($(this).is(":checked")) {
$("#rd_id_zz").prop('disabled', false);
$("#rd_id_zz").show(500, 'easeInSine');
} else {
$("#rd_id_zz").hide(500, 'easeOutSine');
}
});
});
// HTML
<div class="rd_input_fields_wrap" id="rd_input_fields_wrap">
<table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 0;">
<tr>
<th align="left">Prüfung(en) hinzufügen</th>
<th align="right"><a href="#" class="rd_add_field_button" id="add_field"><font color="#FFD700">[+]</font></a></th>
</tr>
<tr>
<th colspan="2"><hr /></th>
</tr>
</table>
<div>
<table id="addrd" width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;">
<tr>
<td align="left">Bezeichnung<font color="#8E6516">*</font></td>
<td align="right">
<select name="rd_type" id="rd_type" class="input-block-level" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" required="required" onclick="disable();" >
<option selected='selected' disabled='disabled'>Bitte auswählen</option>";
<option value='GP'>GP</option>
<option value='WP'>WP</option>
<option value='SP'>SP</option>
</select>
</td>
</tr>
<tr>
<td align="left">Prüfungsnummer<font color="#8E6516">*</font></td>
<td align="right"><input id="rd_id_pn" name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Bsp. 1" required="required" /></td>
</tr>
<tr>
<td align="left">Sollzeit<font color="#8E6516">*</font></td>
<td align="right"><input id="rd_id_sz" name="rd_id[]" type="text" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" placeholder="Bsp. 2:30" required="required" /></td>
</tr>
<tr>
<td align="left">Zwischenzeit?</td>
<td align="right">
<table width="135px" cellspacing="0" style="border: 0;">
<tr>
<td align="left">
<div class="checkboxOne">
<input type="checkbox" value="yes" id="checkboxOneInput" name="rd_id[]"/>
<label for="checkboxOneInput"></label>
</div>
</td>
<td align="right">
<select name="rd_id[]" id="rd_id_zz" class="zz" placeholder="Anzahl" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 75px;" >
<option selected='selected' disabled='disabled'>Zeiten</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
而這裏的撥弄*它：
Show/Hide Select Field on Checkbox within Appended-Content
注： 選擇欄一點兒也不似乎.hide（）上點擊那裏。我的網頁上它正常工作與.show（）和.hide（）
編輯 問：我如何可以結合動態與節目加入另一組輸入字段的/隱藏的onclick複選框（checkswitch） ？此時只有「靜態」工作（您單擊檢查開關並且出現選擇字段（並且在您單擊時應該再次消失））。
「，但只有「靜態」一個與功能顯示/隱藏選擇域onclick複選框。附加的總是顯示選擇域「 你能解釋更多的細節？ – Devsullo
我只希望附加的（[+]）像div一樣工作，它已經在那裏了。 – montreal
哦，你只想複製它？ – Devsullo