html+css 防止多次点击开关，并控制遍历中的数据判断开关按钮的数量

最新推荐文章于 2024-01-05 20:56:58 发布

红尘007

最新推荐文章于 2024-01-05 20:56:58 发布

阅读量294

点赞数

分类专栏： other jquery

本文链接：https://blog.csdn.net/weixin_37933545/article/details/90928372

版权

other 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

<style type="text/css">
    .chooseBtn {
        display: none;
    }
    .choose-label {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }
    .choose-label:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .chooseBtn:checked + label.choose-label:before {
        left: 20px;
    }
    .chooseBtn:checked + label.choose-label {
        background-color: #51ccee;
    }
</style>

<td class="am-text-middle">
    <input type="checkbox" name="sex" id="male.<?= $key ?>" class="chooseBtn "
        <?php if($first['is_publish'] == 1 ): ?>
            checked
        <?php endif; ?>
           onclick="choose_fun(<?=  $first['article_images_id'] ?>,<?= $key?>)" />
    <label for="male.<?= $key ?>" class="choose-label"></label>
</td>

<script>
    //更新数据
    var couldRun = true;
    function choose_fun(article_images_id,key) {
        if(couldRun){
            couldRun = false;
            //获取当前被选中数量
            var str = $(".chooseBtn:checked").length;
            var check = $(".chooseBtn").eq(key).is(":checked");
            if(check){
                if(str > 5) {
                    layer.msg('数量不可以大于5');
                    $(".chooseBtn").eq(key).removeAttr('checked');
                    return false;
                }
            }
            else{
                if(str < 1){
                    layer.msg('数量不可以小于1');
                    $(".chooseBtn").eq(key).prop('checked',true);
                    return false;
                }
            }
            $.ajax({
                url: "<?= url('content.article/imagesUpdate') ?>",
                type:"POST",
                dataType: 'text',
                data:{
                    article_images_id:article_images_id
                },
                dataType:"json",
                success: function(data){
                    if(data === 1){
                        layer.msg("修改成功！");
                    }else if(data === 2){
                        layer.msg("开启失败(显示数量已达上限！)");
                    }
                    else{
                        layer.msg("关闭失败(显示数量已达下限！)");
                    }
                }
            });
            setTimeout(function(){
                couldRun = true;
            },1000);
        }else{
            var check = $(".chooseBtn").eq(key).is(":checked");
            if(check){
                layer.msg('请勿连续点击！');
                $(".chooseBtn").eq(key).removeAttr('checked');
                return false;
            }else{
                layer.msg('请勿连续点击！');
                $(".chooseBtn").eq(key).prop('checked',true);
                return false;
            }
        }
    }
</script>