互聯網開(kāi)發&品牌全案設計(jì)

12年(nián) 實戰經驗,品質服務

jQuery checkbox RemoveAttr(checked)之後再點擊Attr(checked)屬性失效

2018-01-24 關鍵詞: 2700

需求:具有(yǒu)審核權限的(de)一(yī)定會(huì)有(yǒu)更新、查看(kàn)權限,具有(yǒu)更新權限的(de)一(yī)定會(huì)有→(yǒu)查看(kàn)全選沒有(yǒu)選中查看(kàn)權限的(de)、一(yī)定沒有(yǒu)更新、審核權限

思路(lù):根據value值來(lái)判斷,查看(kàn)權限的(de)value值會(huì)包含_find、更新權限的(de)value值包含_mod、審核權限的(de)value包含_review,在點擊checkbox的(de)點擊事(shì)件(jiàn)上(shàng)操作(zuò)。

$(function() {

         &nb♦sp;  $("#modaltbody input[type='checkbox']").change(function(){       

            &nbs‌p; var str=$(this).val();

              if(str.indexOf('review')>0) {      

          ≈;        //審核

               &‍nbsp;  if($(this).is(":checked")) {            

        &n©bsp;          &n‍bsp;  $(this).parent().parent().find("input").each(function(){

          &n₹bsp;         ↑;      if($(this).val().indexOf('find')>0 || $(this).val().indexOf('mod'))

          &αnbsp;               {  ♠;          &nb↓sp;           ≥;    

         &n≤bsp;            &nbs<p;       $(this).prop("checked",true);

           ÷          &nb₽sp;    }

             &nb€sp;        })

                 ‌; }

               & nbsp;  else

              &€nbsp;   {          &nb©sp;

         φ;          "   $(this).prop("checked",false);

         &nb≥sp;        }

        &nb​sp;     }else if(str.indexOf('mod')>0)

            &←nbsp; {

        &nbs₽p;         //修改

                &n₩bsp; if($(this).is(":checked")) {

            &♦nbsp;              $(this).parent().parent().find("input").each(function(){

          &nb‍sp;               if($(this).val().indexOf('find')>0)

         &÷nbsp;          & nbsp;     {        &nbs$p;               &♥nbsp;   

              &nbs p;            ↔   $(this).prop("checked",true);

             &nb&sp;          •;  }

              ​        })

             &n©bsp;    }else

              &≈nbsp;   {

            &n¶bsp;        ★ $(this).parent().parent().find("input").each(function(){

               ‍;           if($(this).val().indexOf('review')>0 || $(this).val().indexOf('mod')>0)

             &nb♥sp;            {    &nbΩsp;              ♠;         

            &n bsp;               ¶  $(this).prop("checked",false);

                ≈          }

           ₩           })

                 ₩; }


              }else {

             ÷     //查看(kàn)

                &nbs✘p; if(!$(this).is(":checked"))

             &nb®sp;    {

               &♦nbsp;      $(this).parent().parent().find("input").each(function(){   

                     &nbs™p;         $(this).prop("checked",false);           &;           

               ♣       })

               &₽nbsp;  }


              }


            })


        });

jquery使用(yòng)attr,removeAttr二次無法選中的(de)問(wèn)題解決辦法

這(zhè)裡(lǐ)的(de)選中checkbox、取消checkbox也(yě)可(kě)以用(yòng)下(xià)面的(♠de)寫法

$(this).attr("checked","checked");//選中

$(this).removeAttr("checked");//取消

這(zhè)種寫法的(de)缺點是(shì)在chrome浏覽器(qì)中第一(yī)次點擊有(yǒu)效後面就(jiù)不(bù)行(xíng)了(le),IE8倒是(sh'ì)沒有(yǒu)問(wèn)題

百度了(le)很(hěn)久找到(dào)原因是(shì)HTML的(de)屬性分(fēn)為(wèi)attribute和(hé)property,暫且将後者稱為(wèiλ)特性。

checked屬性即分(fēn)為(wèi)attribute->checked,和(hé)property->true,false。

對(duì)于一(yī)個(gè)checkbox,若未定義checked="checked",alert($.attr("checked")) 的(de)結果是(shì)undefined‌。若已定義則結果是(shì)checked。attribute并不(bù)随著(zhe)checkbox的(de)狀态變化(huà)而≈改變。

使用(yòng)prop($.attr("checked"))的(de)話(huà)輸出則分(fēn)别為(wèi)false和(hé)true。prop¶erty則随其變化(huà)而變化(huà)。

所以在修改checked屬性時(shí)要(yào)使用(yòng)prop()。prop()在jQuery1'.6版本後新增。

另外(wài)關于在IE9之前版本中,如(rú)果property沒有(yǒu)在DOM元素被移除之前删除,使用∞(yòng).prop()方法設置DOM元素property(簡單類型除外(wài):number、string、boolean)的(de)值會(hu ì)導緻內(nèi)存洩露。為(wèi)了(le)安全的(de)設置DOM對(duì)象的(de)值,避免內(nèi)存洩 露,可(kě)以使用(yòng).data()方法。 目前尚未遇到(dào),先記在這(zhè)裡(lǐ)。 

$('#checkbox').attr('checked'); 返回的(de)是(shì)checked或者是(shì)undefined ,不(bù)是(shì)原來(lái)的(de)true和(hé)false了(le),有(yǒu)φ關此問(wèn)題的(de)解決方法如(rú)下(xià)。 

在JQ1.6之前的(de)版本,我們會(huì)這(zhè)樣寫我們的(de)代碼: 

這(zhè)樣寫在JQ1.6之前完全沒問(wèn)題,可(kě)是(shì)當我們升級JQ1.6到(dào)更高(gāo)的(de)版本時(sh↑í),問(wèn)題就(jiù)來(lái)了(le),此時(shí)我們會(huì)發現(xiàn): 
$('#cb').attr('checked'); 返回的(de)是(shì)checked或者是(¶shì)undefined,不(bù)是(shì)原來(lái)的(de)true和(hé)false了(le)β。 并且checked屬性在頁面初始化(huà)的(de)時(shí)候已經初始化(huà)好(hǎo)了(le),不(bù)會(huì)随著(zhe)狀态的(de)改變而改變。所以​如(rú)果checkbox一(yī)開(kāi)始是(shì)選中的(de),那(nà)麽返回的(de)是(shì)checked,如(rú)果一(yī)開(k‍āi)始沒被選中,則返回的(de)是(shì)undefined

分(fēn)析了(le)其中的(de)原因,可(kě)以這(zhè)樣理(lǐ)解: 
它将“屬性”與“特性”做(zuò)了(le)區(qū)别,屬性指的(de)是(shì)“name,id”等等,特性指的(de)是(shì)“selectedIn™dex, tagName, nodeName”等等。 
JQ1.6之後,可(kě)以通(tōng)過attr方法去(qù)獲得(de)屬性,通(tōng)過prop方法去(qù) 獲得(de)特性

1.  $("#cb").attr("tagName"); //undefined&n bsp;  

2.  $("#cb").prop("tagName"); //INPUT &≤nbsp; 

以上(shàng)是(shì)蘇州網站(zhàn)制(zhì)作(zuò)小(xiǎo)編在實際項目中遇到(dào)的(de)問(wèn)題,記下(xià)了(lδe)解決辦法,額外(wài)搜集了(le)相(xiàng)關信息,僅供參考,希望對(duì)遇到(dào)同樣問(wèn)題的(de)小(×xiǎo)夥伴有(yǒu)幫助。

 

 

 

 


欄目 案例 售後 電(diàn)話(huà)