Quiero seleccionar 3 opciones de muchas. Después de seleccionar 3 opciones, todas las opciones se verán borrosas para que nadie pueda seleccionar más.
Aquí agregué mi código, por favor verifíquelo.
<!DOCTYPE html> <html> <head> <title>want to select</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <style> .select { border: 1px solid blue; height: 25px; margin-bottom: 5px; } .fill { background-color: red; } </style> <body> <div class="select" id="1">Egg</div> <div class="select" id="2">mango</div> <div class="select" id="3">apple</div> <div class="select" id="4">egg</div> <div class="select" id="5">apple</div> <div class="select" id="6">egg</div> </body> <script> $('.select').click(function(e){ var $et = $(e.target); if ($et.hasClass('fill')) { $et.removeClass('fill'); } else { if ($('.fill').length < 3) { $et.addClass('fill'); $et.blur(); } } }); </script> </html>Considera lo siguiente.
$(function() { $('.select').click(function(e) { var $et = $(this); if ($et.hasClass('fill')) { $et.toggleClass('fill'); } else if ($et.parent().find(".fill").length < 3) { $et.toggleClass('fill'); } return false; }); }); .select { border: 1px solid blue; height: 25px; margin-bottom: 5px; } .fill { background-color: red; } <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <div class="wrapper"> <div class="select" id="1">Egg</div> <div class="select" id="2">mango</div> <div class="select" id="3">apple</div> <div class="select" id="4">egg</div> <div class="select" id="5">apple</div> <div class="select" id="6">egg</div> </div> Agregar un contenedor permite una mejor referencia al padre. A continuación, puede comprobar cuántos elementos .fill hay dentro del envoltorio. Ahora puede eliminar o agregar condicionalmente la clase de fill .