0

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!!!

Urim
  • 1
  • 1

2 Answers2

1

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.

Trolobezka
  • 53
  • 1
  • 7
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>
Leorin
  • 36
  • 1
  • 3
  • 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. – Urim Mar 26 '23 at 11:06
  • Ok, according to this code sample, you have to group by naming 1,3,4,5,7th.. checkboxes as group1[] and 2,4,6,8th... checkboxes as group2[]. But simply you try it first on 2 checkboxes only. If you success you can extend your group. – Leorin Mar 26 '23 at 12:22
  • http://jsfiddle.net/1pm7ay90/ – Leorin Mar 26 '23 at 12:31
  • Also, you should check Trolobezka's answer. If you dont necessarily have to use checkboxes for your page, then use radio instead. – Leorin Mar 26 '23 at 12:40