私のフォームには、同じIDの同じフィールドを持つ2つのdiv（bench_stock_itemsとnon_bench_stock_items）があります。jQueryを使用して、divの一部ではないclient_id selectで選択された値に応じて、一方を無効にし、もう一方を有効にします。divの一部であるmedia_idselectで選択された値に基づいて、さまざまなフォームを表示/非表示にする関数があります。私の関数は、有効としてロードされた最初のdivの選択に対してのみ機能し、無効としてロードされた2番目のdivに対しては機能しません。私はほとんどすべてを試しました。element：enabledを最初のdivで正しく見つけることができますが、2番目のdivでは見つけることができません。
Javascript：
<script type="text/javascript">
$(document).ready(function () {
$("#non_bench_stock_fields :input").removeAttr("disabled", true);
$("#bench_stock_fields :input").attr("disabled", true);
$("#artifact_client_id").change(function () {
if ($("#artifact_client_id option:selected").text() == "Bench Stock") {
$("#bench_stock_fields").slideDown("fast");
$("#bench_stock_fields :input").removeAttr("disabled");
$("#non_bench_stock_fields").slideUp("fast");
$("#non_bench_stock_fields :input").attr("disabled", true);
} else {
$("#non_bench_stock_fields").slideDown("fast");
$("#non_bench_stock_fields :input").removeAttr("disabled");
$("#bench_stock_fields").slideUp("fast");
$("#bench_stock_fields :input").attr("disabled", true);
}
});
$("#artifact_media_id:enabled").change(function () {
var enabled_media_id = null;
enabled_media_id = $("#artifact_media_id:enabled");
var enabled_evidence_type_id = null;
enabled_evidence_type_id = $("#artifact_evidence_type_id:enabled");
if ($(enabled_media_id).find('option:selected').text() !== "Please select") {
$("#show_selected_media_fields").slideDown("fast");
$("#show_selected_media_fields :input").removeAttr("disabled", true);
$.post("/artifacts/show_selected_media_fields", {
media_type: $(enabled_media_id).find('option:selected').text(),
evidence_type_id: $(enabled_evidence_type_id).find('option:selected').val()
}, function (data) {
$("#show_selected_media_fields").html(data);
});
} else {
$("#show_selected_media_fields").slideUp("fast");
$("#show_selected_media_fields :input").attr("disabled", true);
}
$('#printHere').html(enabled_media_id);
});
$("#artifact_evidence_type_id:enabled").change(function () {
var enabled_evidence_type_id = null;
enabled_evidence_type_id = $("#artifact_evidence_type_id:enabled");
if ($(enabled_evidence_type_id).find('option:selected').text() == "Deliverable, (DC)") {
$("#logical_items_form").slideDown("fast");
$("#logical_items_form :input").removeAttr("disabled", true);
} else {
$("#logical_items_form").slideUp("fast");
$("#logical_items_form :input").attr("disabled", true);
}
});
});
私のルビービューhtml：
<div id="bench_stock_fields" class="hide">
<li><%= f.label :evidence_number, :class => "required" %><%= f.text_field :evidence_number %></li>
<li><%= f.label :evidence_type, :class => "required" %><%= f.collection_select(:evidence_type_id, EvidenceType.where("code='BS'"), :id, :name_and_code) %></li>
<li><%= f.label :media_id, :class => "required" %><%= f.collection_select(:media_id, Media.where("name = 'External Hard Drive' or name = 'Internal Hard Drive' or name = 'Thumb Drive'"), :id, :name) %></li>
<li><%= f.label :received_location,:class => "required" %><%= select_tag(:current_location_id, options_from_collection_for_select(Location.where("location = 'Lab' and rack = 'N/A' and bin = 'Bench Stock'"), :id, :location_name)) %></li>
</div>
<div id="non_bench_stock_fields" >
--- same fields as above...
blah... blah... blah...
================================================== ==========================
OKわかりやすいように、コードを簡略化したバージョンで作成しました。これが私の完全なコードです：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="application.css">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#div_car :input").attr("disabled",true);
$("#div_car").attr("disabled",true);
$("#decide").change(function(){
if ($("#decide option:selected").text() == 'Car') {
$("#div_car").slideDown("fast");
$("#div_car").removeAttr("disabled");
$("#div_car :input").removeAttr("disabled");
$("#div_bus").slideUp("fast");
$("#div_bus").attr("disabled",true);
$("#div_bus :input").attr("disabled",true);
} else {
$("#div_bus").slideDown("fast");
$("#div_bus").removeAttr("disabled");
$("#div_bus :input").removeAttr("disabled");
$("#div_car").slideUp("fast");
$("#div_car").attr("disabled",true);
$("#div_car :input").attr("disabled",true);
}
});
$("#cars:enabled").change(function(){
var enabled_select_id = $("#cars:enabled");
$('#printHere').html(enabled_select_id);
});
});
</script>
<!-- we will add our HTML content here -->
<div id="div_decide">
<select id = "decide" name="decide">
<option value="buss">Buss</option>
<option value="car">Car</option>
</select>
</div>
<div id="div_car" class="hide">
<select id = "cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div id="div_bus">
<select id = "cars" name="cars">
<option value="volvo selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
Enabled Select will print here <br/><br/>
<span id="printHere"></span>
</body>
</html>
私のapplication.cssは：
.hide{ display:none;}
基本的にここに私がする必要があることです：
div_carを無効にして非表示としてロードする必要があります。「決定」の選択で選択した値に応じて、div_busをdiv_carに切り替える必要があります。CURRENTLY ENABLEDで選択された値に応じて、「cars」を選択します。何かを表示する必要があります...たとえば、印刷要素。div_bus内の選択された車に対してのみ機能しますが、div_carで切り替えられた場合は機能しません。