在我的表单中，我有两个 div（bench_stock_items 和 non_bench_stock_items）具有相同的字段和相同的 id。使用 jQuery，我根据在 client_id select 中选择的值禁用一个并启用另一个，该值不是 div 的一部分。我有一个函数可以根据在 media_id select 中选择的值显示/隐藏不同的表单，这是 div 的一部分。我的功能仅适用于加载为启用的第一个 div 中的选择，而不适用于加载禁用的第二个 div。我几乎尝试了一切。我能够找到元素：在第一个 div 中正确启用但在第二个 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...
==================================================== ===========================
好的，我写了一个简化版本的代码，以便更容易理解。这是我的完整代码：
<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_car 切换 div_bus。根据 CURRENTLY ENABLED 中选择的值选择“汽车”，我需要显示一些东西......说打印元素。它仅适用于 div_bus 中的选择汽车，但在使用 div_car 切换时不起作用。