在链接中工作 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方法可以添加与此相同的表单，我也有这个脚本，可以在选中复选框时禁用experience_end并且效果很好。

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)参数传递给点击事件disableEndDate()函数：

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

---

现在，您的函数已准备好获取单击的复选框元素。而且您还知道包含输入和选择的 DIV 是嵌套的。

您可以从复选框开始targetedSelect。您到达父div（.form-checkbox），然后到达包含选择元素的上一个div（.form-checkbox），最后找到选择。

所以：

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

---

现场示例

希望这会有所帮助