如何设置easyui select 设为不可选,现在我disable后虽然灰掉了,但是还可以下拉

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设置easyui select 设为不可选,现在我disable后虽然灰掉了,但是还可以下拉相关的知识,希望对你有一定的参考价值。

求大神指点!

参考技术A <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function()
$('#ComboBox').combobox(
valueField:'status',
textField:'statusname',
data:[
status : "0",
statusname : "默认"
,
status : "1",
statusname : "状态1"
,
status : "2",
statusname : "状态2"
,
status : "3",
statusname : "状态3"
]
);
);
</script>
</head>
<body>
下拉框:<input id="ComboBox" disabled="disabled">

</body>
</html>

这是写的例子,自己看下吧,希望能帮到你

easyui中的datebox中设置某年的某些月份不可选

最近做项目时约到一个需求就是要求2019年的12个月中只能选择其中的某些月份,其他月份不可选择,对于2018年的月份全部不可选,2020年以及以后的全部可选,

即效果如下:

技术图片

 

参考了网上的一些资料以后,做了代码的修改,实现了以上功能

function styleMonthDate(db,sdate,mArr,myear){  
      /*
      db --jquery对象
      sdate --‘2010-02‘ ,默认的日期,
      mArr --需要设定的可选月份 元素为字符串类型,[‘1‘,‘4‘,‘7‘,‘10‘]
      myear -- 需要设定的年份
      */
      db.datebox({
          onShowPanel: function() { //显示日期选择对象后再触发弹出月份层的事件,初始化时没有生成月份层
             changeDateColor(0);        
              //fix 1.3.x不选择日期点击其他地方隐藏在弹出日期框显示日期面板
              if (p.find(‘div.calendar-menu‘).is(‘:hidden‘)) 
                p.find(‘div.calendar-menu‘).show();                
              if (!tds) setTimeout(function() { //延时触发获取月份对象,因为上面的事件触发和对象生成有时间间隔
                  tds = p.find(‘div.calendar-menu-month-inner td‘);                            
                  changeDateColor(0);                        
                //绑定年份选择按钮事件
                  p.find(".calendar-menu-prev").bind("click", function() {
                      changeDateColor(-1);
                  });
                  p.find(".calendar-menu-next").bind("click", function() {
                      changeDateColor(1);
                  });
                tds.click(function (e) {
                     e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
                     var year = /d{4}/.exec(span.html())[0]//得到年份
                       year = p.find(".calendar-menu-year").val();
                     month = parseInt($(this).attr(‘abbr‘)); //月份
                     month=month<=9?‘0‘+month:month;
                     var da=year+month;
                     var now=getNowYearMonth().replace(/-/g,‘‘);
                    if(!$(this).hasClass(‘calendar-other-month‘)){ 
                         //如果大于当前日期不允许填入
                            if(da>now){
                                return ;
                            }                                             
                          db.datebox(‘hidePanel‘).datebox(‘setValue‘, year + ‘-‘ +month); //设置日期的值
                      }
                });
               
              }, 0);
              //changeDateColor();
              //隐藏 标题两侧按钮
              p.find(".calendar-prevmonth").hide();
              p.find(".calendar-nextmonth").hide();
              p.find(".calendar-prevyear").hide();
              p.find(".calendar-nextyear").hide();
              //禁止年份输入框编辑
              p.find(".calendar-menu-year").attr("disabled", "disabled");
              //解绑年份输入框中任何事件
              p.find(".calendar-menu-year").unbind();
          },
          parser: function (s) {//配置parser,返回选择的日期
              if (!s) 
              return new Date();
              var arr = s.split(‘-‘);
              return new Date(parseInt(arr[0]), parseInt(arr[1]) - 1, 1);
          },
          formatter: function (date) {
              var y = date.getFullYear();
              var m = date.getMonth() + 1;
              return y + "-" + (m < 10 ? ("0" + m) : m);
           },     
      });
      //改变样式
      function changeDateColor(i) {                
          //先初始化
          p.find(‘div.calendar-menu-month-inner td‘).each(function(index, element) {
                  var jqNode=$(element);
                  jqNode.removeClass(‘calendar-other-month‘);      
          });        
          p.find(‘div.calendar-menu-month-inner td‘).each(function(index, element) {         
              year = parseInt(p.find(".calendar-menu-year").val())+i;
              var jqNode=$(element);
              if ( year <=(myear-1)) {
                  jqNode.addClass(‘calendar-other-month‘);
              }// else if ((element.abbr ==3 || element.abbr==6 || element.abbr==9 || element.abbr==12) && year == "2019") {
                else if ( ($.inArray(element.abbr,mArr)==-1 && year == myear)) {              
                     jqNode.addClass(‘calendar-other-month‘);
                  }
                  
          }); 
      }
      var p = db.datebox(‘panel‘); //日期选择对象
      var tds=false;
      var span = p.find(‘span.calendar-text‘); //显示月份层的触发控件    
      var yearArr = sdate.split(‘-‘);
      var year = yearArr[0];
      db.datebox(‘setValue‘, sdate);
  }
 

html中的代码以及调用:

<label>查询时间:</label>
<input id="ls_startDate" class="easyui-datebox" />

<script type="text/javascript">
$(function() {
//查询时间修改成月
var db1=$(‘#ls_startDate‘);
//开始日期和结束日期的设置
styleMonthDate(db1,"2020-01",[‘1‘,‘4‘,‘7‘,‘10‘],2019);
</script>

1.注意点:

  在 styleMonthDate 的函数中,用到了 $.inArray(value,arr) 函数,如果在Arr中找到了和value 相同(类型也相同,即 ===)的元素,返回该元素的下标,如果没有找到,返回-1;

2.在easyui 中设置某个月份不可选择的类是 ‘calendar-other-month’ 这个类实际就是设置了元素的透明度为0.3 

 

以上是关于如何设置easyui select 设为不可选,现在我disable后虽然灰掉了,但是还可以下拉的主要内容,如果未能解决你的问题,请参考以下文章

如何设置jquery easyui中下拉框不可编辑

如何设置select只读不可编辑且select的值可传递

Vue设置输入框、下拉框不可修改

easyui中如何设置下拉列表框只能选择,列表框内不能输入,

如何设置jquery easyui中下拉框不可编辑

如何设置jquery easyui中下拉框不可编辑