Блог

Главная - Вопросы по программированию - Отключить взаимодействие между списком и флажком

Отключить взаимодействие между списком и флажком

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я создал список ul с добавленным флажком, но когда я устанавливаю флажок, также выбирается элемент списка, как я могу выбрать только флажок.Я добавляю элементы списка с помощью jquery.

 $('#projects-menu').append("<li  value='sales1'><input class='myCheckBoxes' type='checkbox' checked>Sales 1</li>")
$('#projects-menu').append("<li  value='sales2'><input class='myCheckBoxes' type='checkbox'>Sales 2</li>")  
 input[type=checkbox] {
vertical-align: middle;
float: right;
cursor: pointer;
}
ul.menu{
margin-top: 30px;
list-style-type: none;  
}
ul.menu li{
background-color:#e0e0e0;
padding: 8px 12px;
border: solid 2px white;
cursor: pointer;
border: 3px solid #FFFFFF;
border-radius: 10px;
}
ul.menu li:hover{
background-color:#A9A9A9;
}
ul.menu li.selected{
background-color: #23ac61;
}
ul.menu li.disabled{
pointer-events: none;
opacity:0.6;
}
input[type=checkbox] {
vertical-align: middle;
float: right;
cursor: pointer;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
<ul class="menu" id="projects-menu">         
</ul>
</div>

показанное изображение — это результат, который я получаю, и флажок, и элемент списка выбираются при выборе флажка [![введите описание изображения здесь][1]][1]

Комментарии:

1. Можете ли вы добавить данные projectName что это такое , как это выглядит ?

2. projectName / String.raw ${value[projectName]} не имеет отношения к вопросу и скрывает фактическую проблему / вопрос — пожалуйста, обновите, чтобы удалить это, если это не относится к делу.

3. когда я устанавливаю флажок, элемент списка также выбирается — что это значит? Как вы «устанавливаете флажок» и как вы проверяете, что «li также выбирается»?

4. Это просто применяемый цвет фона. когда вы устанавливаете флажок — я не думаю, что это проблема здесь — пожалуйста, добавьте свой CSS

5. что означает взаимодействие здесь , на изображении — вы имеете в виду , что применяется зеленый цвет — когда вы устанавливаете флажок ?

Ответ №1:

Вам нужно проверить, установлен ли текущий флажок или нет, используя функцию jQuery .is(‘:checked’). Основываясь на этом, вы можете добавить класс disabled в родительский тег li.

Пожалуйста, обратитесь к приведенному ниже решению.

 <!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>List Checkbox</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        input[type=checkbox] {
            vertical-align: middle;
            float: right;
            cursor: pointer;
        }

        ul.menu {
            margin-top: 30px;
            list-style-type: none;
        }

        ul.menu li {
            background-color: #e0e0e0;
            padding: 8px 12px;
            border: solid 2px white;
            cursor: pointer;
            border: 3px solid #FFFFFF;
            border-radius: 10px;
        }

        ul.menu li:hover {
            background-color: #A9A9A9;
        }

        ul.menu li.selected {
            background-color: #23ac61;
        }

        ul.menu li.disabled {
            /* pointer-events: none; */
            /* opacity: 0.6; */
        }

        ul.menu li.disabled:hover {
            background-color: #e0e0e0;
            cursor:default;
        }

        input[type=checkbox] {
            vertical-align: middle;
            float: right;
            cursor: pointer;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#projects-menu').append("<li  value='sales1' class='disabled'><input class='myCheckBoxes' type='checkbox' checked>Sales 1</li>")
            $('#projects-menu').append("<li  value='sales2'><input class='myCheckBoxes' type='checkbox'>Sales 2</li>")
            $('#projects-menu li').click(function(event) {
             
                if (!$(this).hasClass('disabled')) {
                    $('#projects-menu li').removeClass('selected');
                    $(this).addClass('selected');
                } 
            })
            $(".myCheckBoxes").click(function (event) {
                event.stopPropagation();
               
            })
        
        });
    </script>
</head>

<body>
    <div class="projects">
        <ul class="menu" id="projects-menu">
        </ul>
    </div>
</body>

</html>

Комментарии:

1. Когда я устанавливаю флажок, элемент списка не должен быть выбран, и здесь элемент списка не выбирается отдельно

2. Как выбор списка, так и выбор контрольного поля должны выполняться отдельно

3. Здесь, как только вы отключили элемент списка, вы не можете снова снять флажок? Это ожидаемое поведение

4. НЕТ .. Если мы отключим список, мы не сможем выбрать элемент списка, и флажок должен иметь возможность снимать флажок и проверять .. аналогично элемент списка также

5. Итак, я думаю, что ответ, который я только что обновил, правильно решает ваш запрос?