页面重新加载时的 jquery onchange 事件不起作用答案

【问题标题】：jquery onchange event on page reloads does not works页面重新加载时的 jquery onchange 事件不起作用
【发布时间】：2017-05-05 11:02:41
【问题描述】：

我正在使用 jquery 根据选择的下拉菜单禁用其他下拉菜单。下面是它的代码。

<script type="text/javascript" >
jQuery(function() {
 jQuery('select').change(function() {
  if(jQuery(this).val() == "A"){
   jQuery(document.getElementById('dataForm:listView:filterId:field10value1'))
          .attr('disabled','disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field4value1'))
         .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field6value1'))
         .removeAttr('disabled');
  } else if(jQuery(this).val() == "R"){
   jQuery(document.getElementById('dataForm:listView:filterId:field10value1'))
        .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field4value1'))
         .attr('disabled','disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field6value1'))
        .attr('disabled','disabled');
  }else{
   jQuery(document.getElementById('dataForm:listView:filterId:field10value1'))
       .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field4value1'))
       .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field6value1'))
      .removeAttr('disabled');
  }
 })
})
</script>

所以在页面重新加载后，被禁用的字段再次启用，但选择是为了禁用这些字段。

请帮忙！！

谢谢卫生巾

【问题讨论】：

您介意编辑您的帖子，这样水平滚动条就会消失吗？
现在这样好吗
@reporter 你觉得这看起来好多了？
您在加载文档后尝试$('#select').val('[Default value]').trigger('change'); 吗？
它基本上会做什么......你能提供一个例子或一些链接

标签： jquery

【解决方案1】：

您也应该将条件写入 page_load 函数以获得对页面刷新的影响：

  $(document).on("pageload",function(){
      //add here logic related to get currently selected value from dropdown and make 
     other tags disable as per your requirement
  });

如果您遇到任何问题，请告诉我。

【讨论】：

【解决方案2】：

在页面加载时，您需要检查下拉列表的值，与更改下拉列表时一样。

这是因为尽管您的服务器端代码保留了下拉列表的选定值，但它不会保留您在客户端设置的控件的禁用状态。网页本质上是无状态的，您未明确保留的任何更改都将在页面刷新时被销毁。

您可以轻松地重复使用现有代码来执行此操作：

jQuery(function() {
 setEnabledDisabled(jQuery('select').val()); //runs at page load

 jQuery('select').change(function() {
   setEnabledDisabled(jQuery(this).val());
 });

 //re-usable function to implement the logic
 function setEnabledDisabled(val);
  if(val == "A"){
   jQuery(document.getElementById('dataForm:listView:filterId:field10value1'))
          .attr('disabled','disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field4value1'))
         .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field6value1'))
         .removeAttr('disabled');
  } else if(val == "R"){
   jQuery(document.getElementById('dataForm:listView:filterId:field10value1'))
        .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field4value1'))
         .attr('disabled','disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field6value1'))
        .attr('disabled','disabled');
  }else{
   jQuery(document.getElementById('dataForm:listView:filterId:field10value1'))
       .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field4value1'))
       .removeAttr('disabled');
   jQuery(document.getElementById('dataForm:listView:filterId:field6value1'))
      .removeAttr('disabled');
  }
 }
});

附：作为旁注，我强烈建议升级您的 jQuery 版本——在撰写本文时（2009 年发布），1.3 已经超过 8 年了。从那时起，已经有许多错误修复和增强功能，以及支持更新浏览器和功能的更改，您可能希望利用这些更改。 1.12.4 是 1.x 分支的最新版本，于 2016 年 5 月发布。如果您不再需要支持旧版本的 IE，您可以移至 2.x 分支，这将导致下载量更小，但无需引入兼容性问题。 3.x 做了一些重大更改，需要进行更彻底的测试。

【讨论】：

【解决方案3】：

执行此操作 - 在 Pageload 上，即在 Document Ready 上，函数 run_your_rules($val) 将使用默认选择调用

$(document).ready(function(){
  var $this = $('select');
  var $val=$this.val();
  run_your_rules($val);

  $this.on('change',function(e) {
        run_your_rules($(this).val());
  });

  function run_your_rules($val){
    if($val==="A"){
        console.log("disable A");
    }else if($val==="B"){
        console.log("disable B");
    }
  }

})

【讨论】：