解決layui前端動態設置radio、checkbox默認選項的解決方案

2020-12-23 楊永鴻

前幾天接觸一個二次開發,後臺UI用的是layui框架,程序原來的TAG標籤設置中自由輸入的,想修改為單選。這樣子的功能用於,一個產品屬於兩種分類的作法。第一種就是系統自帶的產品分類,第二種使用標籤來實現。然爾一個產品並不需要同時屬於兩個以上的標籤,所以二次開發修改為單選radio,而不是多選checkbox。

不過本文作出的動態設置選中狀態單選與多選的作法是一致的。

在前端模板文件中,普通用到的是使用<if condition=""></if>來作判斷。但是奇怪的就是layui並不能識別。

第一次嘗試:

<input class='layui-input' type='radio' name='tag' title='正常' value='正常' <if condition="">checked</if>>

發現在input包括中無法解析到if判斷語句;當然在普通情況下是可以的,中不過程序使用了layui,因為layui通過js識別所有表單元素,重新編譯了。所以在js的重新編譯中無法識別原本不屬於表無素材的標籤。

第二次嘗試:

<if condition="">

<input class='layui-input' type='radio' name='tag' title='正常' value='正常' checked>

<else/>

<input class='layui-input' type='radio' name='tag' title='正常' value='正常'>

</if>

以上代碼確定可以選中狀態,但隨之又有其它問題隨之而來,選中的與未選中的兩個均會顯示出來,為什麼呢?

原因還是在於layui遍歷form裡的表單元素,並不會因if語句的存在而作出最終結果。而是識別到有兩個input。

第三次嘗試,不用radio,不就是單選嗎?下拉單項也是可以的,使用<select>又測試了一番。同樣會出現以上兩個問題。

無辦法下只能求助於神奇的百度給出了這樣的結果;

$("input[name=tag][value=正常]").prop("checked","true");

form.render();

prop() 方法設置或返回被選元素的屬性和值。

當該方法用於返回屬性值時,則返回第一個匹配元素的值。

當該方法用於設置屬性值時,則為匹配元素集合設置一個或多個屬性/值對。

render()就是重新渲染對象;

看到這裡很多朋友以為問題已經得到解決了,其實問題才剛剛開始。不是提示form對象找不到,就是提示form中找不到render()方法。為什麼呢,整套程序不是doem,它還整合了很多其它的框架和插件,調作起來並不像官方給出的這麼直接。

form.render();

$form.render();

form().render();

.layui.form().render();

……

通通試了一篇,還是不行,這東西就有這麼折騰。累了中途休息一下。

一覺睡醒,闊然開朗。先來看看完成後的代碼。

thistag="{$info.tag}";//讀後臺數據值

var mytag=new Array("無","第一項","第二項","第三項","第四項","第五項");//所有單選項目

cntag="";

for(j = 0,len=mytag.length; j < len; j++) { //遍歷數組

if(thistag==mytag[j]){ //判斷是否選中

cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' checked>";

}else{

cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' >";

}

}

$("#cntag").html(cntag); //列印到網頁中顯示最終效果

優點:只讀一次後面數據;

簡化:就算單選項很多,只需寫在一個數組中即可。

簡單:只需寫一次判斷語句;

原理既然是前端使用,多用js,少用<if><php>這些php後端定義的標籤。

相關焦點

  • 巧設置解決win7系統bug,解決看圖困擾
    數次發帖廣招天下英雄豪傑獻策不得,今日終有一網友獻策,親測問題解決,不敢獨享特來分享。故障現象圖片在文件夾預覽圖可以看到,應該不是圖片損壞,雙擊默認用Windows照片查看器打開,報錯提示內存不足或硬碟空間不足。網絡上搜索各種教程,都是教增大內存或清理空間,其實這不是原因,因為圖片很小,我電腦內存足夠大,硬碟空間也足夠,用第三方軟體可以打開,只能是Windows7系統問題。
  • 服務端表格組件 GcExcel V4.0 發布,構建類 Excel 全棧解決方案...
    將其與純前端表格控制項 SpreadJS 結合使用,可滿足表格數據的在線編輯與展示、前後端數據同步、服務端批量導出與列印,以及高性能類 Excel 報表模板設計與服務端處理等功能,為您的應用程式打造一整套類 Excel 全棧解決方案。
  • layui中使用lay-verify進行條件校驗
    (['form', 'layer'],function () { $ = layui.jquery;var form = layui.form, layer = layui.layer;//自定義驗證規則 form.verify({nikename: function (value) {if (value.length <
  • 輸入192.168.1.1無法進入路由選項怎麼辦 解決方法【詳解】
    在瀏覽器輸入192.168.1.1後無法進入路由器選項,下面先分析產生此問題的原因和各種解決方法。  打不開的原因分析   原因一、默認網址  一般的路由器,進入路由器選項的網址都是192.168.1.1,這個是默認的,但是有些路由器不是,可能是192.168.0.1或其它。並且這個網址是不固定的。
  • 公布具體解決方案
    @光榮特庫摩遊戲:關於玩家提問的說明:感謝各位玩家購買《三國志14》。關於廣大玩家關心的問題奉上解決方案。測試後已確認驅動程序版本為19.10.1(WHQL)或之下可以解決此問題,敬請嘗試降級驅動版本。  關於本問題現正與AMD確認、調查之中。  二、關於使用筆記本電腦等時,特定環境下遊戲卡頓的問題  請嘗試以下操作:  ① 啟動NVIDIA控制面板。  ② 在「選擇一項任務」中選擇「3D設置」的「管理3D設置」。
  • 光榮回應《三國志14》卡頓問題 已提供解決方案
    光榮特庫摩迅速在微博上回應了《三國志14》啟動和卡頓問題,官方表示正在準備對策方案,感謝廣大玩家的關注與支持。  現在官方已經提供了一系列解決方案,一起來看看吧!  2、在「選擇一項任務」中選擇「3D設置」的「管理3D設置」。  3、「全局設置」菜單中,將「首選圖形處理器」選項變更為「高性能NVIDIA處理器」,點擊應用。  4、 重啟遊戲。
  • win7錄音機內錄及win7混音設置解決方法
    找到「立體聲混音」選項卡,系統默認是禁用的,所以我們需要手動打開。右鍵點擊「立體聲混音」,在彈出的菜單裡選擇「啟用」,然後再次右鍵點擊選擇「設置為默認設備」立體聲混音    麥克風選項卡裡主要是調節麥克風音量的,麥克風增強按鈕是控制對方聽見你的聲音大小的關鍵,系統默認增強值為零,所以對方幾乎聽不見你說話,我們根據自己的實際情況來調大吧。
  • 前端進階:css必知的幾個底層知識和技巧
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫學習方法推薦問題學習法:帶著問題去學習,有利於集中注意力,目的明確,這既是有意學習的要求,也是發現學習的必要條件
  • 【行業動態】著色碳纖維預浸料解決方案
    【行業動態】著色碳纖維預浸料解決方案 2020-12-25 07:00 來源:澎湃新聞·澎湃號·政務
  • Android性能優化-過渡繪製解決方案
    GPU過渡繪製調試 Android手機的開發者選項中有『調試 GPU 過度繪製』的選項: 也就是theme裡面設置的。 ImageView的background和imageDrawable重疊 Android中,所有的view均可以設置background。ImageView除了能夠設置background之外,還能設置ImageDrawable。
  • 王曉民:笨鳥遠程辦公解決方案可解決遠程辦公三大痛點
    艾融軟體CMO王曉民在會上表示,新年伊始,新冠病毒疫情來襲,企業正常的生產經營秩序被打亂,集中辦公風險加劇,很多企業被迫啟動遠程辦公的備選項,以減少因疫情導致的生產經營活動損失,保證企業依然可以正常運轉。在他看來,對於企業級客戶來說,採用遠程辦公存在三大痛點:如何保證企業經營管理和業務運營的數據安全,自主可控?
  • 玩LOL卡屏跳幀怎麼辦 解決辦法在這裡
    隨著玩英雄聯盟的玩家越來越多,許多故障也隨之出現,最近看到不少玩家反饋稱lol經常會出現跳幀和卡屏的現象,今天小編就為大家帶來關於跳幀和卡屏的解決方案。 3、ctrl+空格關閉輸入法,默認輸入法會造成的卡屏,一放技能就卡。 4、同網絡內進同一房間人數多起來後造成的卡屏,可以通過檢查路由器相關設置,全面放開p2p與udp限制。
  • parker派克防爆伺服高速電機行業解決方案解析
    Parker派克防爆伺服電機EX and EY 電機共性:無刷10極永磁同步電機,低慣量,高動態一、Parker防爆電機產品優點:(1)EX, EY 電機較低的轉動慣量,可實現轉矩、速度、位置高動態控制(2)體積緊湊: 比異步電機緊湊1,5-5倍(3)高動態定位: 永磁同步電機具有較低的轉動慣量,便於控制轉矩實現高動態運動
  • win10出現只能新建文件夾,無法保存文件等問題解決方案
    這類問題一般就是權限問題,修改組策略即可解決問題,選擇最左下角的搜索,輸入gpedit.msc,結果家庭版沒有組策略。這也難不倒我們,網上有解決方案,但大多數的命令運行結果是不對的,終於找到一個確定可以訪問的,大家收藏起來以方便需要的時候用到。
  • 技術帖 | DNF常見問題及解決方案
    這種一般都是連接遊戲伺服器的過程,一般上次退出是在哪個頻道,這次登錄就會默認連接到哪個頻道。和機器有關係,如果是在網吧,一般會連接伺服器靠前的頻道,可想而知,如果很多人都連靠前的頻道這一步自然就慢了。解決方案:用滑鼠點一下這個登錄界面就可以了,不然會卡很久很久。
  • Win10上EPLAN崩潰的兩種解決方法
    針對這一讓人生厭的問題,本文將提供兩種解決方案,希望能夠幫助到正好有此困擾的朋友。  若你遇到上述問題,請嘗試關閉三個選項:1.「選項 → 設置:項目 → 翻譯 → 常規」: 不勾選「在輸入時進行翻譯」。  在選項設置框中輸入「在輸入時」,快速找到項目設置,取消勾選,如下圖。
  • 原來手機有自帶默認的解決方案~
    在介紹之前,需要說明的是以下方法步驟是手機自帶默認的解決方案。步驟一、設置密碼鎖定。  可以通過設定4個數字的簡單密碼,也可以設定複雜的包含字母、數字、符號組合的長密碼。當然,你甚至可以設定「抹掉數據」:若連續10次輸入錯誤密碼,將抹掉此iPhone上的所有數據。而對於iPhone 5S以上設備來說,還可以通過指紋瑣來進行設定。
  • 夏普全方位布局8K生態解決方案
    夏普將在智慧家庭、智慧辦公、娛樂視聽、健康醫療、教育藝術、智慧安防、產業創新、自動化工程等多個領域持續發力,全線布局系統解決方案。面對嚴峻的新冠疫情及人口老齡化等社會問題,夏普將更加關注健康、醫療和長照關懷領域。隨著整合產業鏈優勢資源,夏普已逐步轉型成為提供系統解決方案的科技服務型公司,將為客戶提供更具附加價值的產品體驗和服務,與客戶共同為社會進步做出應有的貢獻。