Question

在我的表单中，我有两个div（bench_stock_items和non_bench_stock_items），其中相同的字段具有相同的ID。使用jQuery我禁用一个并启用其他，具体取决于在client_id选择中选择的值不是div的一部分。我有一个函数，根据在media_id select中选择的值显示/隐藏不同的表单，这是div的一部分。我的函数仅适用于加载为启用的第一个div中的select，而不适用于加载为禁用的第二个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加载为已禁用和隐藏。根据select“decision”中选择的值，我需要使用div_car切换div_bus。根据当前启用选择的值选择“汽车”，我需要显示一些东西...说打印元素。它仅适用于div_bus中的select car，但在使用div_car切换时不起作用。

Answer 1

这不是一个真正的答案......我有两个问题。

首先。什么是使用：启用psuedo选择器更改时，如果它被禁用，你不能改变它......真的没有意义......

其次，当我看到这样的功能时，它让我想知道为什么在世界上你会想要让事情复杂化......

    $("#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);
        }
    });

似乎更能让你理智地写出来......

    $("#artifact_evidence_type_id").change(function () {

        if ($(this).find('option:selected').text() == "Deliverable, (DC)") {

            $("#logical_items_form").slideDown("fast").find('input').attr("disabled", false);

        } else {

            $("#logical_items_form").slideUp("fast").find('input').attr("disabled", true);

        }
    });

Answer 2

我通过在rails中使用html选项为两个collection_select

设置不同的ID来解决这个问题

jQuery - 没有得到元素：正确启用

2 个答案: