How to disable the rest of the available checkboxes if some are selected

How to disable the rest of the available checkboxes if some are selected

I was wondering through the internet and I found this type of checkboxes with images. (<a href="https://codepen.io/kskhr/pen/pRwKjg" target="_blank">https://codepen.io/kskhr/pen/pRwKjg</a>) I need to disable the rest of the checkboxes when 3 are selected.

I was wondering through the internet and I found this type of checkboxes with images. (https://codepen.io/kskhr/pen/pRwKjg) I need to disable the rest of the checkboxes when 3 are selected.

JS

// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input $(".image-checkbox").on("click", function (e) { $(this).toggleClass('image-checkbox-checked'); var $checkbox = $(this).find('input[type="checkbox"]'); $checkbox.prop("checked",!$checkbox.prop("checked"))

e.preventDefault(); });

I think the best way can be solved with javascript, but i'm a little bit confused.

Thank you!

javascript jquery html5 css3 css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Awesome drop down menu on JQuery, HTML5 and CSS3

vegasNavigation .A script for implementing navigation on a site with a normal drop-down list and with mega content. The application is written in JQuery, html5 and ССS3 using the compiler SCSS

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Website header text made out entirely of interactive bubble particles? Why not :) In today's HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Let's improve our understanding of these 3 fundamental web development technologies and create something cool in the process. HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Map Custom Marker and Controls | JavaScript, CSS and API

How we can add a custom marker on google map using JavaScript & CSS? Solution: JavaScript Google Map Marker With CSS, Custom API Map Controls.