在链接中工作 jQuery 以添加字段

Question

在我的 Rails 应用程序中，我有这段代码

<%= form_for @experience, url: experience_path do |f| %>      
    <div class="experselect end-date">
        <%= f.label :experience_end, class: "profile_label" %><br />
      <%= f.date_select :experience_end, {start_year: 1945, discard_day: true, order: [ :day, :month, :year ]}, :html=> {class: 'date-select'} %>
    </div>

    <div class="form-checkbox current-item">
      <%= f.check_box :experience_current, class: 'is_current', id: "checkbox_id" %>
      I currently work here
    </div>
<%= f.submit "Update experience" %>

我有一个 link_to_add_fields 方法，可以添加与此相同的表单

function disableEndDate(thisObj) {
    var targetedSelect = thisObj.closest(".form-checkbox").prev(".experselect").find("select");

    if (thisObj.prop("checked")) {

        targetedSelect.prop(
            'disabled', true);
        targetedSelect.css(
            "background-color", "#D9D8DD");


    } else {
        targetedSelect.prop(
            'disabled', false);
        targetedSelect.css(
            "background-color", "#FFFFFF");
    }
}

$(document).ready(function(){
  $("input[class='is_current']").click(function () {
      disableEndDate($(this));
  });
});

但实际上我的问题是当复选框并提交表单并尝试再次对其进行编辑时，我发现复选框已选中并且选择被禁用但选择的背景不是 #D9D8DD 预期

Answer 1

您必须从您的复选框开始进行选择。为此，您需要在点击事件时将 $(this)parameter 传递给您的 disableEndDate() 函数：

$("input[class='is_current']").click(function () {
    disableEndDate($(this));
});

---

现在您的函数已准备好获取您单击的复选框元素。你也知道包含 input 和 select 的 DIV 是嵌套的。

您从您的复选框开始得到targetedSelect。您到达父 div (.form-checkbox)，然后是包含选择元素 (.form-checkbox) 的上一个 div，最后找到 select。 p>

所以：

function disableEndDate(thisObj) {
    var targetedSelect = thisObj.closest(".form-checkbox").prev(".experselect").find("select");

    if (thisObj.prop("checked")) {

        targetedSelect.prop(
            'disabled', true);
        targetedSelect.css(
            "background-color", "#D9D8DD");


    } else {
        targetedSelect.prop(
            'disabled', false);
        targetedSelect.css(
            "background-color", "#FFFFFF");
    }
}

---

Live exemple

希望这会有所帮助