Question

我正在使用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>

因此，在页面重新加载后，再次启用禁用的字段，但选择是禁用这些字段。

请帮助!!

由于 SANKET

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

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

Answer 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');
  }
 }
});

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

Answer 3

执行此操作 - 在Pageload上，即在文档就绪时，将使用默认情况下的任何选项调用函数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");
    }
  }

})

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

3 个答案: