jquery如何设置与去除disabled属性,获取选中失效
分类:澳门新萄京最大平台

下边两种写法没有任何区别 只是少了些代码而已...

//两种方法设置disabled属性
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");

一、jquery判断checkbox是否选中及改变checkbox状态

下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的

假设我们现在需要这样的场景:页面上有一个checkbox,我们期望通过Jquery来获得它是否选中,或者通过Jquery来让它被选中。
在JQ1.6之前的版本,我们会这样写我们的代码:

复制代码 代码如下:

//三种方法移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");

jquery判断checked的三种方法:

下边两种写法没有任何区别 只是少了些代码而已...

复制代码 代码如下:

<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />

jquery的checked与disabled操作方法。
在jquery中checked与disabled属性的操作方法基本相同。
例如:  

复制代码 代码如下:


<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').attr('checked');

jquery判断checked的三种方法:

<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />

.attr('checked):   //看版本1.6 返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16 :true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />

//设置选中
$('#cb').attr('checked',true);
</script>

复制代码 代码如下:

jquery判断checked的三种方法:  

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:


这样写在JQ1.6之前完全没问题,可是当我们升级JQ1.6到更高的版本时,问题就来了,此时我们会发现:
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了。
并且checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。所以如果checkbox一开始是选中的,那么返回的是checked,如果一开始没被选中,则返回的是undefined。

.attr('checked'):   //看版本1.6 返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16 :true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

.attr('checked'):   //看版本1.6 返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16 :true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

复制代码 代码如下:

jquery判断checked的三种方法:

解决的方法是:

jquery赋值checked的几种写法:

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:  

// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

.attr('checked'):   //看版本1.6 返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16 :true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

复制代码 代码如下:

所有的jquery版本都可以这样赋值:

// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

jquery1.6 :prop的4种赋值:

jquery赋值checked的几种写法:

<input type='checkbox' id='cb'/>
<script>
//获取是否选中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//设置选中
$('#cb').prop('checked',true);
</script>

复制代码 代码如下:

jquery1.6 :prop的4种赋值:  

复制代码 代码如下:

所有的jquery版本都可以这样赋值:

分析了其中的原因,可以这样理解:

$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);

// $("#cb1").prop("checked",true);//很简单就不说了哦
// $("#cb1").prop({checked:true}); //map键值对
// $("#cb1").prop("checked",function(){
return true;//函数返回true或false
});

// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

它将“属性”与“特性”做了区别,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性

jquery1.6 :prop的4种赋值:

//记得还有这种哦:$("#cb1").prop("checked","checked");  

二、jquery如何判断checkbox(复选框)是否被选中

jquery1.6 :prop的4种赋值:

复制代码 代码如下:

复制代码 代码如下:

参考:

谁都知道 在html 如果一个复选框被选中 是 checked="checked"。

// $("#cb1").prop("checked",true);//很简单就不说了哦
// $("#cb1").prop({checked:true}); //map键值对
// $("#cb1").prop("checked",function(){
return true;//函数返回true或false
});

$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT

$("#cb1").prop("checked",true);    //很简单就不说了哦
$("#cb1").prop({checked:true});    //map键值对

jquery1.6以后才支持prop。

但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked

//记得还有这种哦:$("#cb1").prop("checked","checked");

您可能感兴趣的文章:

  • jquery中prop()方法和attr()方法的区别浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jQuery .attr()和.removeAttr()方法操作元素属性示例
  • jQuery学习之prop和attr的区别示例介绍
  • jquery attr方法获取input的checked属性问题
  • 用JQuery 判断某个属性是否存在hasAttr的解决方法
  • jquery $(this).attr $(this).val方法使用介绍
  • Jquery下attr和removeAttr的使用方法
  • jquery 获取自定义属性(attr和prop)的实现代码
  • jquery attr()设置和获取属性值实例教程

$("#cb1").prop("checked",function(){
    return true;    //函数返回true或false
});

测试实例:  

所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr("checked")==true)
例子里面包括了一下几个功能。

更多参考:

$("#cb1").prop("checked","checked");

代码示例:

复制代码 代码如下:

上代码 大家可以随便测试:(你是懒人么-_-)

更多参考:

<html>
<head>
<title>测试-jquery操作元素的disabled属性-www.</title>
<style type="text/css">
</style>
<!--1.62可以修改1.42  1.52  1.7来测试-->
<script type="text/javascript" src=";
<script type="text/javascript">
$(function(){
//判断checked
//var a=$("#cb1").attr('checked'); //看版本1.6 返回:"checked"或"undefined" ;1.5-返回:true或false
//var b=$("#cb1").prop('checked'); //1.6 :true/false
var c=$("#cb1").is(':checked');  //所有版本:true/false
//alert(a);
//alert(b);
alert(c);

   <input type="button" id="btn1" value="全选">
   <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
   <input type="button" id="btn4" value="反选">
   <input type="button" id="btn5" value="获得选中的所有值">

jquery1.6以后才支持prop的哦

复制代码 代码如下:

//赋值   前两个所有的jquery版本都支持 prop只有jquery1.6 支持
//$("#cb1").attr("checked","checked");//1.5-
//$("#cb1").attr("checked",true);//1.5-
//$("#cb1").prop("checked","checked");//1.6 (整理的时候把这个忘记啦)
//$("#cb1").prop("checked",true);//1.6
//$("#cb1").prop({checked:true});//1.6
//$("#cb1").prop("checked",function(){
//return  true;//1.6
//    });
})();
</script>
</head>
<body>
<!--赋值的时候记得去掉checked-->
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked"/>
</body>
</html>

代码  

新建一个text复制内容进去  后缀名改成html

<html>
    <head>
        <title>测试</title>
        <style type="text/css">

 

复制代码 代码如下:

<html>
    <head>
        <title>测试</title>
        <style type="text/css">

        </style>
        <!--1.62可以修改1.42  1.52  1.7来测试-->
        <script type="text/javascript" src="http://www.xb-cj.com/uploads/allimg/190728/162345K20-0.jpg"></script>
        <script type="text/javascript">
        $(function(){
            //判断checked
       //    var a=$("#cb1").attr('checked'); //看版本1.6 返回:"checked"或"undefined" ;1.5-返回:true或false
       //    var b=$("#cb1").prop('checked'); //1.6 :true/false
       var c=$("#cb1").is(':checked');  //所有版本:true/false
       //    alert(a);        
       //    alert(b);
            alert(c);

            //赋值   前两个所有的jquery版本都支持 prop只有jquery1.6 支持
       //    $("#cb1").attr("checked","checked");//1.5-
       //    $("#cb1").attr("checked",true);//1.5-
       //   $("#cb1").prop("checked","checked");//1.6 (整理的时候把这个忘记啦)
       //    $("#cb1").prop("checked",true);//1.6 
       //    $("#cb1").prop({checked:true});//1.6 
       //    $("#cb1").prop("checked",function(){
       //        return  true;//1.6 
       //    });                
        })();

        </script>
    </head>
    <body>
        <!--赋值的时候记得去掉checked-->
    <input id="cb1" type="checkbox" checked />
    <input id="cb2" type="checkbox" checked="checked"/>
    </body>
</html>

        </style>
        <!--1.62可以修改1.42  1.52  1.7来测试-->
        <script type="text/javascript" src=">
        <script type="text/javascript">
        $(function(){
            //判断checked
       //    var a=$("#cb1").attr('checked'); //看版本1.6 返回:"checked"或"undefined" ;1.5-返回:true或false
       //    var b=$("#cb1").prop('checked'); //1.6 :true/false
       var c=$("#cb1").is(':checked');  //所有版本:true/false
       //    alert(a);       
       //    alert(b);
            alert(c);
           //赋值   前两个所有的jquery版本都支持 prop只有jquery1.6 支持
       //    $("#cb1").attr("checked","checked");//1.5-
       //    $("#cb1").attr("checked",true);//1.5-
       //   $("#cb1").prop("checked","checked");//1.6 (整理的时候把这个忘记啦)
       //    $("#cb1").prop("checked",true);//1.6
       //    $("#cb1").prop({checked:true});//1.6
       //    $("#cb1").prop("checked",function(){
       //        return  true;//1.6
       //    });               
        })();
   
        </script>
    </head>
    <body>
        <!--赋值的时候记得去掉checked-->
    <input id="cb1" type="checkbox" checked />
    <input id="cb2" type="checkbox" checked="checked"/>
    </body>
</html>

您可能感兴趣的文章:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <SCRIPT LANGUAGE="JavaScript" src=">
  <SCRIPT LANGUAGE="JavaScript">
  <!--
   $("document").ready(function(){
   
    $("#btn1").click(function(){
    
    $("[name='checkbox']").attr("checked",'true');//全选
 
    })
       $("#btn2").click(function(){
    
    $("[name='checkbox']").removeAttr("checked");//取消全选
 
    })
    $("#btn3").click(function(){
    
    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
 
    })
    $("#btn4").click(function(){
    
    $("[name='checkbox']").each(function(){
    
  
     if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   
   }
   else
   {
    $(this).attr("checked",'true');
   
   }
  
    })
 
    })
     $("#btn5").click(function(){
    var str="";
    $("[name='checkbox'][checked]").each(function(){
     str =$(this).val() ""r"n";
   //alert($(this).val());
    })
   alert(str);
    })
   })
  //-->
  </SCRIPT>
 
 </HEAD>
 <BODY>
 <form name="form1" method="post" action="">
   <input type="button" id="btn1" value="全选">
   <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
   <input type="button" id="btn4" value="反选">
   <input type="button" id="btn5" value="获得选中的所有值">
   <br>
   <input type="checkbox" name="checkbox" value="checkbox1">
   checkbox1
   <input type="checkbox" name="checkbox" value="checkbox2">
   checkbox2
   <input type="checkbox" name="checkbox" value="checkbox3">
   checkbox3
   <input type="checkbox" name="checkbox" value="checkbox4">
   checkbox4
   <input type="checkbox" name="checkbox" value="checkbox5">
   checkbox5
   <input type="checkbox" name="checkbox" value="checkbox6">
   checkbox6
   <input type="checkbox" name="checkbox" value="checkbox7">
   checkbox7
   <input type="checkbox" name="checkbox" value="checkbox8">
 checkbox8
 </form>  

来源:

您可能感兴趣的文章:

  • jQuery学习3:操作元素属性和特性
  • defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式
  • jQuery学习笔记 操作jQuery对象 属性处理
  • jQuery .attr()和.removeAttr()方法操作元素属性示例
  • JQuery对class属性的操作实现按钮开关效果
  • jquery根据属性和index来查找属性值并操作
  • jquery中添加属性和删除属性
  • readonly与disabled有什么区别
  • JQuery设置input属性(disabled、enabled)
  • jquery设置元素readonly和disabled(checkbox只读)
  • 使用disabled与readonly将input设置为只读
  • jquery设置元素readonly与disabled属性
  • jquery设置元素的readonly和disabled属性
  • 有关disabled、display、visible的区别

三、 jquery判断checkbox是否被选中

在html的checkbox里,选中的话会有属性checked="checked"。

如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($"#xxx".attr("checked")),会打印出"true"",而不是checked"!
如果没被选中,打印出的是"undefined"。

不要尝试去做这样的判断:if($"#xxx".attr("checked")=="true")或者if($"#xxx".attr("checked")=='checked')
应该是if($("#checkbox1").attr("checked")==true)
全选和全不选函数

复制代码 代码如下:

function checkAll(){
   if($("#checkbox1").attr("checked")==true){
    $("input[name='xh']").each(function() {
     $(this).attr('checked',true);
    });
   }else {
    $("input[name='xh']").each(function() {
     $(this).attr('checked',false);
    });
   }
澳门新萄京,  }

四、JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的。

判断checkbox是否被选中网上有选多种写法,这里有一种方法,个人觉得

比较方便。

因为比较简单,没什么技术含量,直接代码

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值</title>
<script type="text/javascript" language="javascript" src="" ></script>
<script type="text/javascript">
$(function(){
      /*------------
        全选/全不选
        ------------*/
     $('#cboxchecked').click(function(){
         //判断apple是否被选中
         var bischecked=$('#cboxchecked').is(':checked');
         var fruit=$('input[name="fruit"]');
         bischecked?fruit.attr('checked',true):fruit.attr('checked',false);
         });
         /*-------------
            获取选中值
          -------------*/
        $('#btn_jquery如何设置与去除disabled属性,获取选中失效。submit').submit(function(){
            $('input[name="fruit"]:checked').each(function(){
                var sfruit=$(this).val();
                alert(sfruit);
                });
                return false;
            });
    })
</script>
</head>
 
<body>
<form action="">
  <input type="checkbox"  id="cboxchecked" />
  <label for="cboxchecked">全选/全不选</label>
  <br />
  <br />
  <input type="checkbox"  id="cboxapple" name="fruit" value="apple" />
  <label for="apple">Apple</label>
  <input type="checkbox"  id="cboxorange" name="fruit" value="orange" />
  <label for="orange">Orange</label>
  <input type="checkbox"  id="cboxbanana" name="fruit" value="banana" />
  <label for="banana">Banana</label>
  <input type="checkbox"  id="cboxgrapes" name="fruit" value="grapes" />
  <label for="grapes">Grapes</label>
  <br />
  <br />
  <input type="submit" id="btn_submit" value="submit" />
</form>
</body>
</html>

您可能感兴趣的文章:

  • jquery对复选框(checkbox)的操作汇总
  • js与jQuery实现checkbox复选框全选/全不选的方法
  • JQuery限制复选框checkbox可选中个数的方法
  • jquery操作复选框checkbox的方法汇总
  • jquery获取复选框checkbox的值的简单实现方法

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:jquery如何设置与去除disabled属性,获取选中失效

上一篇:jquery获取复选框被选中的值,jQuery分别收获选中 下一篇:没有了
猜你喜欢
热门排行
精彩图文