需求:具有(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(){
  var str=$(this).val();
if(str.indexOf('review')>0) {
 ≈; //審核
  if($(this).is(":checked")) {
&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; }
  }else if(str.indexOf('mod')>0)
&←nbsp; {
&nbs₽p; //修改
&n₩bsp; if($(this).is(":checked")) {
&♦nbsp; $(this).parent().parent().find("input").each(function(){
  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)幫助。

2018-01-24
關鍵詞:
2700
電(diàn)話(huà)咨詢