Restricting the number of checkboxes using jQuery depending on which radio buttons are selected

Question

Restricting the number of checkboxes using jQuery depending on which radio buttons are selected

Having an issue with checkboxes on a webform. The user must choose options for a purchase by selecting checkboxes and radio buttons. There are 2 radio buttons, numbered 1 and 2, representing the quantity of the product to be purchased. Following those are about 5 checkboxes indicating different colors of the product. When a user selects 1 at the radio buttons, only 1 checkbox should be active; if they select 2, then only 2 checkboxes should be available to check. Looking for help, potentially using jQuery for this task...

The setup includes two divs: one with the id #radioButtons containing the 2 radio buttons and another div with the remaining checkboxes.

jquery checkbox radio-button

Answer 1

Answer №1

Since there is no provided markup in your post, I will assume it would look something like this:

HTML

<div id="radioButtons">
  <input type="radio" name="quantity" id="radio1">
  <input type="radio" name="quantity" id="radio2">
</div>
<div class="checkBoxes">
  Color 1:<input type="checkbox" name="color" disabled="disabled">
  Color 2:<input type="Checkbox" name="color" disabled="disabled">
  Color 3:<input type="CHECKBOX" name="color" disabled="Disabled">
  Color 4:<input type="CheckBox" name="color" Disabled="Disabled">
  Color 5:<input type="chEcKboX" name="color" DISABLED="DISABLED">
</div>

JQuery

$('#radio1').on('change', function() {
    $('.checkBoxes :checkbox').prop('disable', true);
    $(':check:eq(0)').prop('enable', false);
});

$('#radio2').on('change', function() {
    $('.checkBoxes :checkbox').prop('disable', true);
    $(':check:eq(0), :check:eq(1)').prop('enable', false);
});

Demo Link

Answer 2

Since there is no provided markup in your post, I will assume it would look something like this:

HTML

<div id="radioButtons">
  <input type="radio" name="quantity" id="radio1">
  <input type="radio" name="quantity" id="radio2">
</div>
<div class="checkBoxes">
  Color 1:<input type="checkbox" name="color" disabled="disabled">
  Color 2:<input type="Checkbox" name="color" disabled="disabled">
  Color 3:<input type="CHECKBOX" name="color" disabled="Disabled">
  Color 4:<input type="CheckBox" name="color" Disabled="Disabled">
  Color 5:<input type="chEcKboX" name="color" DISABLED="DISABLED">
</div>

JQuery

$('#radio1').on('change', function() {
    $('.checkBoxes :checkbox').prop('disable', true);
    $(':check:eq(0)').prop('enable', false);
});

$('#radio2').on('change', function() {
    $('.checkBoxes :checkbox').prop('disable', true);
    $(':check:eq(0), :check:eq(1)').prop('enable', false);
});

Demo Link

Answer 3

Answer №2

Using the actual HTML source where the issue arises could be a potential solution.

UPDATE:

I am struggling to comprehend your reasoning behind wanting to pursue this approach. In terms of usability, this method seems rather unconventional and perhaps not ideal. Allow me to pose some questions for you.

What is the motivation behind implementing it in this manner?
What options do you wish to offer your users?

There are numerous ways to incorporate inline selections, such as the well-known example of selecting an iPad model on apple.com. However, the key is to offer user interfaces that are easily understandable and provide a pleasant user experience.

Answer 4

Using the actual HTML source where the issue arises could be a potential solution.

UPDATE:

I am struggling to comprehend your reasoning behind wanting to pursue this approach. In terms of usability, this method seems rather unconventional and perhaps not ideal. Allow me to pose some questions for you.

What is the motivation behind implementing it in this manner?
What options do you wish to offer your users?

There are numerous ways to incorporate inline selections, such as the well-known example of selecting an iPad model on apple.com. However, the key is to offer user interfaces that are easily understandable and provide a pleasant user experience.

Answer 5

Answer №3

One approach is to attach a click event to the checkboxes and use an event handler to verify if the maximum number of checkboxes allowed has been reached. Based on this condition, you can return either true or false.

Answer 6

One approach is to attach a click event to the checkboxes and use an event handler to verify if the maximum number of checkboxes allowed has been reached. Based on this condition, you can return either true or false.

Answer 7

Answer №4

Check out this example

I am managing the creation of checkboxes based on the radio button's id and dynamically generating them within a div.

UPDATE:

I have made changes to the provided fiddle. Please see the updated version here: Updated Fiddle

Answer 8

Check out this example

I am managing the creation of checkboxes based on the radio button's id and dynamically generating them within a div.

UPDATE:

I have made changes to the provided fiddle. Please see the updated version here: Updated Fiddle

Restricting the number of checkboxes using jQuery depending on which radio buttons are selected

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having an issue with receiving an "undefined variable" error message when trying to validate a form using PHP and AJAX

Struggling to construct a binary tree as my descendants are not arranged in the right sequence

"Implementing jquery autocomplete feature with the ability to fetch data from

Real-time data updates using AJAX in Ruby on Rails

Deciding on the proper character formatting for each individual character within the RICHT TEXT EDITOR

Fill in datatable with information from a JSON array if there are missing values in certain columns

Issues with the animation of the navbar menu button are preventing it from functioning

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Switching a Rails/Ajax form from create to update mode upon submission

Updating the content of a div when the mouse hovers over it

Issue with change event not firing upon page load

Having trouble with innerHTML.value functionality?

how to change the color of a specific item in a list created using v-for

Troubleshooting problem with retrieving Ajax data in Datatables

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

JSP form continues to submit despite JavaScript validation returning false

Tips for altering the scrolling rate of a container

I am attempting to modify the text of a specific button in jQuery using HTML, but I am encountering difficulties in making

Several Divs Positioned on Different Pages with Backgrounds That "Scroll"

In jqGrid's gridComplete event, we can use the getRowData method to retrieve the value of a