JQuery禁用radio、select、checkbox的实现代码

发布时间:2020-02-18编辑:脚本学堂
本文介绍下,用Jquery禁用radio、select、checkbox的方法与代码,有需要的朋友,参考下吧。

代码如下:

复制代码 代码示例:

<script>
/**
 * 禁用radio、select、checkbox
 * edit www.jb200.com
*/
$(document).ready(function(){

   <!-- radio的禁用 -->
    var input = $("#appDIV").find("input:radio");
   input.attr("disabled","disabled");
   input.each(function(){
     if($(this).val()==2){
        $(this).attr("checked",true);
     }   
   });

   <!-- checkbox的禁用 -->
   var checkbox = $("#ce").find("input:checkbox");
   checkbox.attr("disabled","disabled");
    checkbox.each(function(){
     if($(this).val()=="Monthly"){
        $(this).attr("checked",true);
     }   
   });

   <!-- select的禁用方法一 -->
   $("#selectItem option:disabled").css('color', '#CCC');
   $('#selectItem').change(function(){
    if(this[this.selectedIndex].disabled){
     this.selectedIndex = this.s||0;
    }else{
     this.s = this.selectedIndex||0;
    }
   });

   <!-- select的禁用方法二 -->
   $("#selectItem").attr("disabled","disabled");

});
</script>
<body>
<div id="appDIV">
    <input type="radio" value="1"/>1
    <input type="radio" value="2"/>2
    <input type="radio" value="3"/>3
</div>
<div id="sel">
   <select id="selectItem">
    <option value="1" disabled="disabled">Flowers</option>
    <option value="2" disabled="disabled">Gardens</option>
    <option value="3" selected>Trees</option>
   </select>
</div>
<div id="ce">
    <input type="checkbox" name="newsletter" value="Daily" />Dairy
    <input type="checkbox" name="newsletter" value="Weekly" />Weekly
    <input type="checkbox" name="newsletter" value="Monthly" />Monthly
</div>
</body>

运行结果如下面的二张图所示:
<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>禁用raido checkbox select
        (方法一)

jquery 禁用raido checkbox select

    (方法二)