VUE+Layui 复选框：回显、禁用效果

时间：2022-09-10 05:30:00 1000w100rj电阻

一、说明
二、代码
三、如果失败

一、说明

1.爱好(回显):编辑数据时，高亮复选框，数据为 chooseHobbyId

2.爱好(禁用):其他人选择了一些数据，B不能选择；因此，有必要禁止其他候选人选择的数据 disableHobbyId

3、点击提交按钮，效果如下

二、代码

DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <title>VUE Layui 复选框：回显、禁用效果title> head>  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" v="2.5.6" e="layui"/> <style> .w100 { 
           width: 100px; } style> <body> <div class="layui-form" id="vue-mount-element">
    <div class="layui-form-item">
        <label class="layui-form-label w100">爱好（回显）label>
        <div class="layui-input-block">
            <input type="checkbox" v-for="item in hobbyList" name="hobby1[]" :value="item.id" :title="item.name" v-model="chooseHobbyId" lay-skin="primary"/>
        div>
    div>

    <div class="layui-form-item">
        <label class="layui-form-label w100">爱好（禁用）label>
        <div class="layui-input-block">
            <input type="checkbox" v-for="item in hobbyList" :disabled="disableHobbyId.length != 0 && (disableHobbyId.indexOf(parseInt(item.id)) != -1)" name="hobby2[]" :value="item.id" :title="item.name" v-model="chooseHobbyId" lay-skin="primary"/>
        div>
    div>

    <div class="layui-form-item">
        <label class="layui-form-label w100">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit>
                提交
            button>
        label>
    div>
div>
body>

<script src="https://www.layuicdn.com/layui/layui.js" v="2.5.6" e="layui.all">script>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script> let hobbyList = [ //爱好列表选项 { 
          id: 1, name: "爱好1"}, { 
          id: 2, name: "爱好2"}, { 
          id: 3, name: "爱好3"}, { 
          id: 4, name: "爱好4"}, { 
          id: 5, name: "爱好5"}, { 
          id: 6, name: "爱好6"}, ]; //爱好列表 let chooseHobbyId = [1, 3, 5]; //编辑操作：选中的爱好 let disableHobbyId = [2, 4]; //不能选中的爱好（禁用的爱好） let vueObject = new Vue({ 
           el: '#vue-mount-element', //vue挂载的元素 data() { 
           return { 
           hobbyList: hobbyList, chooseHobbyId: chooseHobbyId, disableHobbyId: disableHobbyId }; } }) layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () { 
           var $ = layui.$ , laydate = layui.laydate //日期 , laypage = layui.laypage //分页 , layer = layui.layer //弹层 , table = layui.table //表格 , carousel = layui.carousel //轮播 , upload = layui.upload //上传 , form = layui.form //表单 , element = layui.element; //元素操作 等等... /*layer弹出一个示例*/ // layer.msg('Hello World'); form.on('submit', function (data) { 
           let field = data.field; field = JSON.stringify(field); layer.alert("选中的内容为：" + field); }); }); script>
html>

三、如果失效了

请自行寻找其他的线上 css，js

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

VUE+Layui 复选框：回显、禁用效果

相关文章