Question

在我的rails应用程序中，我的表单中有两个字段，当我选中复选框时，我尝试禁用end_date字段，所以为此我有以下jQuery代码

<div class="form-profile 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">
  <%= f.check_box :experience_current,class: 'is_current', id: "checkbox_id" %>
  I currently work here
</div>

jQuery代码

    $(document).ready(function(){
        $("input[class='is_current']").click(function() {
          if($('#checkbox_id').prop("checked")) {
            $('.end-date select').prop(
                'disabled', true
            );
            $('.end-date select').css(
                "background-color", "#D9D8DD"
          );

          } else {
                $('.end-date select').prop(
                    'disabled', false
                );
                $('.end-date select').css(
                    "background-color", "white"
                );
          }
        });
    });

这项工作很好，除非我提交表单并尝试再次访问以进行编辑，在这种情况下我发现复选框已选中，但表单未被禁用，所以我是想知道如何解决这个问题

Answer 1

您需要检查是否禁用了文档准备就绪的元素。

试试这个：

 function disableEndDate() {
   if($('#checkbox_id').prop("checked")) {
     $('.end-date select').prop(
         'disabled', true
     );
     $('.end-date select').css(
         "background-color", "#D9D8DD"
   );
 }

function enableEndDate() {
  $('.end-date select').prop(
            'disabled', false
   );
   $('.end-date select').css(
     "background-color", "white"
   );
 }

 $(document).ready(function() {
    disableEndDate();

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

您应该通过将逻辑聚合到函数中来进一步改进它。

Answer 2

如果您的网页重新加载，则可能会有效：

if ($('input.is_curent').prop('checked')) {
    $('.end-date select').prop(
        'disabled', false
    );
    $('.end-date select').css(
        "background-color", "white"
    ); 
}

上面的代码只检查是否选中了复选框，并根据复选框的状态禁用表单元素。

Answer 3

您只能禁用复选框click上的表单字段。因此，当页面（重新）加载时，没有触发任何单击事件，因此不执行任何逻辑。一种可能的方法是将逻辑抽象为一个函数，该函数在页面加载和复选框的click上都被调用。

function disableStuff() {
  // Perform disable logic
}

$(document).ready(function() {
  disableStuff();    
  $('.selector').click(function() {
    disableStuff();
  });
});

选中复选框时禁用表单元素

3 个答案: