jqm或html5页面在触摸屏中disabled,单选,多选的change()事件

在用jqm做为html5手机应用开发的时候,也是遇到很多的问题,虽然jqm学习起来上手很快,功能demo也可以,今天就总结一下jqm中遇到的问题,

          ①日期控件:

             jqm的日期小功能是可以直接拿来用,不需要再去找第三方的库来做专门的日期插件,

      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
          <meta>标签中最后的user-scalable="no"是禁止这个html网页缩放,

         引入jqm的几个文件之后,就可以做日期插件了

      

         两个做日期插件的api:

         http://api.jqueryui.com/datepicker/#entry-examples

         https://github.com/arschmitz/jquery-mobile-datepicker-wrapper

        ②在做单选框radio的选择的时候,需要将一些模块显示,另一些模块隐藏,并且要刷新之前的选中状态

           单选

        var t1=$('input:radio[name="YDDL"]:checked').val(); //获取单选框的值  

<span style="font-size:14px;">         $("input[name='GGG']").change(function(){ //单选框选择改变的时候触发的事件
              if($("#GGG_1").prop("checked")){
                $("#gmmc").show();
              }
              else{
                $("#gmmc").hide();
                $("input[name='otherIlls4']").prop("checked", false).checkboxradio("refresh");
              }
            })</span>

          复选

       <pre name="code" class="html">            var text="";  //用循环的方式获取多选框的值,并且用"-"链接起来
            $('input[name="otherIlls"]:checked').each(function(){
              text += "-"+$(this).val();  
            });
③disabled不能禁用组件
在有时候需要禁用一些组件来达到我们程序的一些功能,但是在开发过程中会遇到给元素加disabled属性的
时候元素的视图组件并没有被禁用,其中经常遇到的是:这个组件被包含的父布局中,禁用这个组件必须从父元素
着手,
        $("input[name='tj_sex']").change(function(){
              if($("#male").prop("checked")){
                $("#jzs_gja").parent().hide();//用到parent()获取父窗口然后hide()这个元素
                $("#jzs_zga").parent().hide();
                $("#yjsys").hide();
                $("#rfybk").hide();
                $("#bdyc").hide();
              }else{
                $("#jzs_gja").parent().show();
                $("#jzs_zga").parent().show();
                $("#jzs_lca").parent().show();
              }
            });
$("input[name='tj_sex']").prop("checked", false).checkboxradio("refresh");
   $("input[name='tj_sex']").attr("disabled", true);
$("#age").unbind("touchend");//用unbind("touchend")让这个元素不能触摸达到disabled的作用,当然这些是
用jqm的时候遇到的,jqm里面的元素disabled是用的

     $("#id").addClass('ui-disabled');
     取消禁用用$("#id").removeClass("ui-disabled");
 
 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值