1
在我的表單中，我有兩個div（bench_stock_items和non_bench_stock_items），它們具有相同ID的相同字段。使用jQuery我禁用一個並啓用其他取決於在client_id中選擇的值select不是div的一部分。我有一個函數，顯示/隱藏不同的形式，基於media_id select中選擇的值，這是div的一部分。我的函數僅適用於第一個div中的select，它被加載爲啓用，而不是加載禁用的第二個div。我嘗試了幾乎所有的東西。我能夠找到元素：在第一個div中正確啓用，但不在第二個div中。jQuery - 未獲取元素：正確啓用
的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_bus與div_car切換。根據在當前啓用中選擇的值，選擇「汽車」，我需要顯示一些東西...說打印元素。它只適用於div_bus中的選車，但在用div_car切換時不起作用。
「兩個div ...具有相同id的相同字段。」您不能在多個元素中使用相同的ID。你可能應該使用類來代替。 – Barmar
是否有理由在別人上使用.removeAttr（「disabled」，true）還有.removeAttr（「disabled」）？ – VIDesignz
您可以在示例中添加更多內容嗎？ – JoshGough