1
私は、HTMLフォームを自動的にアセンブルし、form.jsファイルを1つ使用してインタラクティブにする動的フォームシステムを構築しています。システム内に構築されたすべてのフォームを処理します。私はすでにフォームシステムを完成させました。ほとんどの場合、form.jsはネストされたdivのバグを除いて行われます。div内のdivのみをループする方法を理解しよう
リトルの背景： 私は必要な場合はテストしているフォームを投稿しますが、これは私のニーズを説明するのに十分だと思います。 divに質問の依存関係を入れるフォームを使用しているので、質問に回答すると依存関係が表示されます。これがどのように機能するかをよりよく理解するために、フォームシステムは依存関係の無限のネストを可能にします。質問1は、依存関係の問題があり、その依存性は依存性があり、問題2は、依存関係を持っている場合、それは次のようになります。
Question 1:
-> Dependency Question 1-1
-> Dependency Question 1-1-1
Question 2
-> Dependency Question 2-1
：
<form>
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
<div id="dep-1" class="dependency">
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
<div id="dep-1-2" class="dependency">
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
<div id="dep-2-1" class="dependency">
<!-- Other elements (not div) mainly form input, labels, and fieldsets-->
</div>
</div>
</div>
</form>
idはショーのためのもので、フォームシステムによって自動化されています。
私の問題： 私はすべてのことが私が欲しかったやり方で働いていると思っていました。すべてのフォームを制御するためのマスターjsファイルで唯一の問題は、ネストされたdivです。フォームのロード時に、jQueryを使用してすべての依存関係を無効にし、フォームのフォームの送信を防ぎます。問題は、私がそれらを元に戻すときです。私が望む機能は、依存関係divのためだけです：私はそのdivのための：inputを有効にするために、子div内ではありません。現在、親div内のすべての子div：入力が有効になっています。私はそれが子供divに入り、GoogleとSOで2時間以上過ごすのを防ぐために、数多くの方法を試しました。まだ運がない...だから私はあなたの助けを求めている！この
function _toggleDependencyContainer(id, result) {
if (result === true) {
// Allow only input of parent dependency div, not children dependency divs
$('#'+id).find(':input').each(function() { // **THIS LINE IS THE ISSUE!!**
$(this).removeAttr("disabled");
});
$('#'+id).slideDown();
} else {
// Disable all children input through all child divs
$('#'+id).slideUp().find(':input').each(function() {
$(this).attr("disabled", "disabled")
});
}
}
function _toggleElementDependencies(element) {
if (element.type === undefined) {
console.log('element.type is undefined');
return;
}
// Get the dependency ID and result then toggle
switch(element.type.toLowerCase()) {
case 'select':
case 'select-one':
case 'select-multiple':
$("#"+element.id+" option").each(function() {
var id = element.id+'-'+this.value+'-dep';
var result = this.selected;
if (id === undefined || id == null) {
return;
}
_toggleDependencyContainer(id, result);
});
return;
break;
case 'radio':
case 'checkbox':
var id = element.id+'-dep';
var result = $(element).is(':checked');
break;
case 'file':
case 'password':
case 'text':
case 'textarea':
var id = element.id+'-dep';
var result = ($.trim($(element).val())) ? true : false;
break;
default:
return;
break;
}
if (id === undefined || id == null) {
return;
}
_toggleDependencyContainer(id, result);
}
$(document).ready(function() {
$('.dependency').hide(); // hide all dependencies
//
// Scan page for forms
// Loop through each form and process the elements to toggle dependencies
$('form').each(function(i) {
// Find all the input elements
$('#'+this.id).find(':input').not(':disabled').each(function(i) {
_toggleElementDependencies(this);
});
});
// Monitor form elements to toggle dependencies
$(':input').blur(function() {
_toggleElementDependencies(this);
});
$(':radio, :checkbox').click(function() {
$('input[name="'+this.name+'"]').each(function(i) {
_toggleElementDependencies(this);
});
});
$('select').change(function() {
_toggleElementDependencies(this);
});
});
に使用
form.jsコード私はいくつかのjQueryのマスターは私に私が行方不明ですスニペットを与える可能性が期待しています。私は.not（）セレクタを使ってみましたが、私は子divに間違った識別子を使用していると思います。私が試してみました..
$('#'+id).not('div>div').find(':input').each(...);
$('#'+id).not('div:first').find(':input').each(...);
$('#'+id).not('div:first-chil').find(':input').each(...);
$('#'+id).not('div').find(':input').each(...);
と、より多くのだが、私は、単純な何かが足りないと思う
は私がレイアウト
<form method="post" action="/_projects/newForm/" id="test" name="test">
<fieldset>
<legend>One</legend><label for="first-name">First Name <span class="required-icon">*</span></label>
<input type="text" value="test" class="required" title="First Name" id="first-name" name="first_name">
<div class="dependency" id="first-name-dep" style="display: block;">
<label for="first-name2">First Name 2</label>
<input type="text" title="First Name 2" id="first-name2" name="first_name2">
<div class="dependency" id="first-name2-dep" style="display: none;">
<label for="first-name3">First Name 3</label>
<textarea title="First Name 3" id="first-name3" name="first_name3" disabled="disabled"></textarea>
</div>
</div>
<label for="last-name">Last Name</label>
<input type="text" title="Last Name" id="last-name" name="last_name">
<label for="last-name2">Last Name2</label>
<input type="text" title="Last Name2" id="last-name2" name="last_name2">
<label for="radio-test">Radio Test <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-radio-test">
<label for="radio-test-1">
<input type="radio" class="required" title="Yes" value="1" name="radio_test" id="radio-test-1">
Yes
</label>
<label for="radio-test-2">
<input type="radio" class="required" title="No" checked="checked" value="2" name="radio_test" id="radio-test-2">
No
</label>
</fieldset>
<div class="dependency" id="radio-test-1-dep" style="display: block;">
<label for="radio-dep">Radio Dep <span class="required-icon">*</span></label>
<input type="text" class="required" title="Radio Dep" id="radio-dep" name="radio_dep">
<div class="dependency" id="radio-dep-dep" style="display: none;">
<label for="radio-dep2">Radio Dep 2</label>
<input type="text" title="Radio Dep 2" id="radio-dep2" name="radio_dep2" disabled="disabled">
<div class="dependency" id="radio-dep2-dep" style="display: none;">
<label for="radio-dep3">Radio Dep 3 <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-radio-dep3">
<label for="radio-dep3-1">
<input type="radio" class="required" title="Yes" value="1" name="radio_dep3" id="radio-dep3-1" disabled="disabled"> Yes</label>
<label for="radio-dep3-2">
<input type="radio" class="required" title="No" checked="checked" value="2" name="radio_dep3" id="radio-dep3-2" disabled="disabled"> No</label>
</fieldset>
<div class="dependency" id="radio-dep3-1-dep" style="display: none;">
<label for="radio-dep4">Radio Dep 4 <span class="required-icon">*</span></label>
<input type="text" class="required" title="Radio Dep 4" id="radio-dep4" name="radio_dep4" disabled="disabled">
<div class="dependency" id="radio-dep4-dep" style="display: none;">
<label for="radio-dep5">Radio Dep 5</label>
<input type="text" title="Radio Dep 5" id="radio-dep5" name="radio_dep5" disabled="disabled">
<div class="dependency" id="radio-dep5-dep" style="display: none;">
<label for="radio-dep6">Radio Dep 6 <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-radio-dep6">
<label for="radio-dep6-1">
<input type="checkbox" class="required" title="Yes" value="1" name="radio_dep6" id="radio-dep6-1" disabled="disabled">
Yes
</label>
<label for="radio-dep6-2">
<input type="checkbox" class="required" title="No" checked="checked" value="2" name="radio_dep6" id="radio-dep6-2" disabled="disabled">
No
</label>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Two</legend><label for="last-name3">Last Name3</label>
<input type="text" title="Last Name3" id="last-name3" name="last_name3">
<label for="checkbox-test">Checkbox Test <span class="required-icon">*</span></label>
<fieldset class="options-cage" id="options-cage-checkbox-test">
<label for="checkbox-test-10">
<input type="checkbox" class="required" title="Yup" value="10" name="checkbox_test[]" id="checkbox-test-10"> Yup</label>
<label for="checkbox-test-12">
<input type="checkbox" class="required" title="Nope" checked="checked" value="12" name="checkbox_test[]" id="checkbox-test-12"> Nope</label>
</fieldset>
<label for="select-test">Select Test <span class="required-icon">*</span></label>
<select title="Select Test" id="select-test" name="select_test" class="input-select required">
<option value="">- Please Select</option>
<option value="1">one</option>
<option value="2">two</option>
</select>
</fieldset>
<fieldset>
<input type="hidden" value="test" id="formID" name="formID">
<input type="hidden" value="dd7c7fae86db8988669231b67ce637138aa6c180" id="csrf" name="csrf">
<input type="submit" value="Submit">
<input type="reset" title="Reset the form?" value="Reset">
</fieldset>
</form>
これは実際に私がそれを必要とするほとんどどのように動作します。自分の投稿を更新してフォームを追加しました。問題は、フィールドセット（チェックボックスとラジオを中心に）にある入力要素を有効にしないことです。 – Jeremy
@Jeremy：複数のセレクタを使用し、すべてを1つのDOM選択に連結することができます。 '$（ '＃' + id + '>：入力、＃' + id + '>フィールドセット>：入力'）'。 '>'子セレクタの使用に注意してください。 –
@Jeremy：実際には、 'label'のためにさらにネストがあるので最後の'> 'を取り除いてください。私はこれを反映するために私の答えを更新します。 –