Question 43487 in Html Question posted in
Some basic documentation can be found here.

How can I allow the user to select only one + and one – option from one block? – Html

I am trying to make a form similar to the attached picture, for my website.

PDF Application Form

The target is to allow the user to check only one minus and one plus from one block. So far, my html and css code has been perfectly fine but then I found some issues which should not happen, such as once a checkbox has been selected and deselected, it can be selected again even though another option from the same row has been selected.

My html and css code is:

<!DOCTYPE html>
<html>
<head>
  <title>My HTML page</title>
  <style>
    /* style all checkboxes */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px;
}

/* style unchecked checkboxes */
input[type="checkbox"]:not(:checked) {
  background-color: #fff;
}

/* style checked plus checkboxes */
input[type="checkbox"][value="plus"]:checked {
  background-color: #000000;
}

/* style checked minus checkboxes */
input[type="checkbox"][value="minus"]:checked {
  background-color: #000000;
}

/* disable other plus checkboxes when a plus checkbox is checked */
input[type="checkbox"][value="plus"]:checked ~ input[type="checkbox"][value="plus"]:not(:checked) {
  opacity: 0.5;
  pointer-events: none;
}

/* disable other minus checkboxes when a minus checkbox is checked */
input[type="checkbox"][value="minus"]:checked ~ input[type="checkbox"][value="minus"]:not(:checked) {
  opacity: 0.5;
  pointer-events: none;
}

  </style>
</head>
<body>
  <form>
    <p>Question 1:</p>
    <input type="checkbox" name="q1" value="plus"> Plus
    <input type="checkbox" name="q1" value="minus"> Minus

    <p>Question 2:</p>
    <input type="checkbox" name="q2" value="plus"> Plus
    <input type="checkbox" name="q2" value="minus"> Minus

    <p>Question 3:</p>
    <input type="checkbox" name="q3" value="plus"> Plus
    <input type="checkbox" name="q3" value="minus"> Minus

    <p>Question 4:</p>
    <input type="checkbox" name="q4" value="plus"> Plus
    <input type="checkbox" name="q4" value="minus"> Minus

    <br>
    <br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

What I’m trying to achieve is to allow the user to select one plus (+) from the row and one minus (-) from the row in the block.

Application block #1

Based on the image, the user can choose one option from the 1,3,5 and 7 row and one option from the 2, 4, 6 and 8 row.

Can someone please advice me how to overcome this issue? Thank you in advance!!!

Tags:

2

Answers


  1. 0

    you can achieve this simply using some script aid.
    Here billyonecan’s reply is what you want.

    He creates groups and dont let more than one checkbox is checked. Here is the example 

    <span>Group 1:</span>
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />

<span>Group 2:</span>
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />

<span>Group 3:</span>
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />

    Here script part you have to include

    $('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

    Edit: Dont forget to include jquery on your page. You can include jQuery from CDN (Content Delivery Network)

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
    Login or Signup to reply.
  2. 0

    Radio inputs exist for this exact purpose. Just change the type of the input elements from checkbox to radio and it should work. For multiple radio inputs with the same name only one can be selected. You will have to do some styling if you want your radios to look like checkboxes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search