Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

https://i.sstatic.net/EEC2U.png

I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked mark remains unchanged. Can anyone provide assistance in resolving this problem?

HTML

@foreach ($popular as $genreTag)
    <li class="lib">
        <label><input class="genreTag"  id="{{ $genreTag->id}}" type="checkbox" name="" value="{{ $genreTag->name }}">{{{ $genreTag->name }}} ({{count(json_decode($genreTag->tracks, true))}}) </label>
    </li>
@endforeach

@foreach ($featured as $playlist)
    <li class="lib">
        <label><input class="filter-playlist" id='{{{ $playlist->id}}}' tracks='{{ $playlist->tracks }}' type="checkbox" value="{{ $playlist->name}}">{{ $playlist->name}} ({{count(json_decode($playlist->tracks, true))}}) </label>
    </li>
@endforeach

JS

$('.genreTag').on('change', function (e){
    $('input.filter-playlist').not(this).prop('checked', false);
});

$('.filter-playlist').on('change', function (e) {
    $('input.genreTag').not(this).prop('checked', false);
});

CSS

.chk-area {
    border: 2px solid #d22890;
    margin: -2px 10px 0 0;
    float: left;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    position: relative;
}
.chk-checked {
    background: #d22890;
    border-color: #fff;
}
.chk-unchecked {
    background: #fff;
    border-color: #d22890;
}
.ch-playlist {
    display: inline-block;
    width: 100%;
    color: #667482;
    text-decoration: none;
    padding: 10px 20px 10px 45px;
}

Answer №1

Looks like your JavaScript code is in good shape. It seems unnecessary to use not(this) since you are already binding the change event based on class name.

Upon reviewing more details about the HTML being generated, here is the final solution:

var $genreTags = $('input.genreTag'),
    $filterPlaylist = $('input.filter-playlist');

$genreTags.on('change', function (e){
    $filterPlaylist.each(function(){
        var $this = $(this);
        $this.prop('checked', false);
        // Adjusting for the generated HTML
        $this.parent().find('> div').removeClass('chk-checked').addClass('chk-unchecked');
    });
});

$filterPlaylist.on('change', function (e) {
    $genreTags.each(function(){
        var $this = $(this);
        $this.prop('checked', false);
        // Adjusting for the generated HTML
        $this.parent().find('> div').removeClass('chk-checked').addClass('chk-unchecked');
    });
}); 

Answer №2

Great news! Your code is functioning perfectly. However, for a more streamlined approach, consider using radio buttons to select from different options. I have provided a sample code snippet below:

$('input:radio').click(function() {
  $('input:radio:checked').addClass('active');
  $('input:radio:not(:checked)').removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
    <input type="radio" name="radio1" value="radio1">
  </label>

<label>
     <input type="radio" name="radio1" value="radio2">
   </label>

Answer №3

Consider implementing a radio button within the parent div, specifically in the featured-playlist section. Upon selecting this radio button, ensure that all checkboxes under the Popular-genre category are deselected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The function $(...).draggable is not recognized" and "Error: The object $.browser is not defined

I encountered an error stating, TypeError: $(...).draggable is not a function. To resolve this issue, I added jQuery as follows: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> < ...

Choose the parent element in Jquery that has a specific class assigned to it

<div class="stateF"> <p class='itemRightMenu'><a class='black' href=''> Paris</a><div class="stateF2">+</div></p> <div class="stateH"> <p class='itemRight ...

Using CSS Grid to Create Three Rows of Equal Height

I am facing an issue with my vertical menu that stretches 100% height. The rows inside this menu need to have equal height and be stretched to fit the container. Additionally, I noticed that adding a button seems to drop the container slightly below the pa ...

The Battle: AJAX FormData vs encodeURI

When utilizing jQuery's encodeURI(), the data transmitted through AJAX appears in this format: key1=true & key2=34 & ... In order to send an image via AJAX, I employ the FormData() method, resulting in the AJAX data without an image looking ...

What could be the reason my SVG images are not displaying?

My website contains SVGs that are not loading consistently. I acquired some from freeicons/icon8 and created a couple using Inkscape. Initially, I inserted them using HTML but switched to CSS after doing research online on how to ensure they load properly ...

Remove bulleted list from HTML using JavaScript DOM

My task involved deleting the entire "agent" array using the removeChild() function, requiring the id of a <ul> element. However, I faced an issue as I couldn't set the id for the "ul" due to using the createElement() function. //old code < ...

The issue of jQuery not functioning properly within a Rails environment

Despite my efforts, I am still struggling to make jquery work in rails. I have installed the 'jquery-rails' gem and added the require statements in the application.js file. Below is a sample test page that I have been testing: <!DOCTYPE htm ...

Establish a new <section> to serve as a distinct webpage

I have a question about creating multiple <section> elements on a page. I am looking to build an HTML document with several <section> tags, as outlined below. <html> <head> </head> <body> <sectio ...

Calculating square roots in AngularJS

I'm building a basic calculator using a combination of HTML, CSS, and AngularJS. Overall, everything is functioning correctly, but I’m looking to incorporate a SquareRoot function into the calculator. Here’s a snippet of my code: function _solv ...

Differences in jQuery selector behavior when targeting elements in parent windows compared to popup windows

In order for my userscript to function correctly, I have implemented a temporary solution. To create code that is easier to understand and maintain, it's essential for me to gain a deeper understanding of WHY the temporary fix works. Here is some code ...

The form I created retrieves select options via an ajax call, but after saving, the post values are not displaying as expected

I have created a form with the following HTML code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Populate City Dropdown Using jQuery Ajax</title> <script type="text/javascript" src="h ...

When the browser width decreases, the layout's rows become wider

Here is the code snippet I'm using: <style> a.item { border:1px solid #aaa; background:#ddd; padding:10px; ...

Upon the second access, unbind the Ajax Autocomplete and throw the jQuery Simplemodal

Currently, I am utilizing jQuery simplemodal to trigger a popup form that features AJAX autocomplete inputs. Upon the initial opening of the modal, these autocompletes function properly. However, after closing and reopening the modal, the autocomplete in ...

utilizing Jquery file uploader for uploading multiple files

I am currently using jQuery file uploader to upload multiple files. My server is Django and I have successfully uploaded the files. Now, I want to display the uploaded files and provide options for users to delete or add more files. If anyone can help me ...

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

Bootstrap - creating seamless navigation between accordion sections on a single webpage

I am currently attempting to create internal links within an accordion menu on the same page. Here is the code I have been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> & ...

Creating personalized styles for my React components with the help of styled-components

Exploring the power of styled-components for custom styling on child components has been an interesting journey for me. For instance, I recently crafted a unique card component named myCard. Take a look at how it's structured: import React from "rea ...

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

jquery's removeClass method successfully removes the specified class, but the changes made by that class are still present

Being new to web design, JS, and all of this, I would greatly appreciate any suggestions :) Currently, I have these img icons (serviceIcon) positioned 'absolute' with their respective classes (serviceHardware, ...). <div class="servicesBox"&g ...