A user is offered a number of choices. A user must select one or more
choices. A collection of radio buttons allows for only one choice. A
collection of checkboxes allows zero or more choices.

Is there some CSS I can add to a collection of checkboxes that stops all
of them from being unselected? So if the user is unselecting checkboxes
the last selected checkbox can't be unselected. I don't want to use
JavaScript to tell the user to select a check box (if no checkbox is
selected).

Perhaps there's some other UI component is more appropriate?

Hmm, a search seems to indicate that this is a common problem with only
a code-based solution :-(

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 4/12/2020 10:30 am, Andrew Poulos wrote:

A user is offered a number of choices. A user must select one or more choices. A collection of radio buttons allows for only one choice. A collection of checkboxes allows zero or more choices.

Is there some CSS I can add to a collection of checkboxes that stops all
of them from being unselected? So if the user is unselecting checkboxes
the last selected checkbox can't be unselected. I don't want to use JavaScript to tell the user to select a check box (if no checkbox is selected).

Perhaps there's some other UI component is more appropriate?

Hmm, a search seems to indicate that this is a common problem with only
a code-based solution :-(

Too hard for me to solve with CSS so I went for some JavaScript that
checks the number of checked checkboxes and rechecks the last checked
checkbox (if the user unchecks it.)

Still it's an "ugly" thing to do (to have a checkbox behave differently
from the norm).

Andrew Poulos

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In article <Q8mdnTXeL8q26FTCnZ2dnUU7-d_NnZ2d@westnet.com.au>,
Andrew Poulos <ap_prog@hotmail.com> wrote:

Is there some CSS I can add to a collection of checkboxes that stops all
of them from being unselected? So if the user is unselecting checkboxes
the last selected checkbox can't be unselected.

It's too late, I won't try to test it, but I think if you place all your checkboxes one after the other, as siblings, and the submit button as the
last sibling, you can use the :checked pseudo-class to hide and unhide the submit button so they can't submit until at least one box is checked.

#submit-button {display: none;}
.box:checked ~ #submit-button {display: inline-block;}

Something like that.

Pierre
--
Pierre Jelenc
The Gigometer www.gigometer.com
The NYC Beer Guide www.nycbeer.org

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

rcpj@panix.com (Pierre Jelenc) wrote on 04 Dec 2020 in comp.infosystems.www.authoring.stylesheets:

In article <Q8mdnTXeL8q26FTCnZ2dnUU7-d_NnZ2d@westnet.com.au>,
Andrew Poulos <ap_prog@hotmail.com> wrote:

Is there some CSS I can add to a collection of checkboxes that stops all
of them from being unselected? So if the user is unselecting checkboxes
the last selected checkbox can't be unselected.

It's too late, I won't try to test it, but I think if you place all your checkboxes one after the other, as siblings, and the submit button as the last sibling, you can use the :checked pseudo-class to hide and unhide the submit button so they can't submit until at least one box is checked.

#submit-button {display: none;}
.box:checked ~ #submit-button {display: inline-block;}

Something like that.

Pierre

<script>

const minimal = (t) => {
const boxes = t.querySelectorAll('input[type=checkbox]');
const boxesChecked =
t.querySelectorAll('input[type=checkbox]:checked');

if (boxesChecked.length == 1)
boxesChecked[0].disabled = true;
else
boxes.forEach(
function(box) { box.disabled = false }
);
};

</script>

<form onchange='minimal(this)'>

<input type=checkbox checked disabled> 1<br>
<input type=checkbox> 2<br>
<input type=checkbox> 3<br>
<input type=submit>

</form>



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In article <rqcoh3$7na$1@reader1.panix.com>,
Pierre Jelenc <rcpj@panix.com> wrote:

In article <Q8mdnTXeL8q26FTCnZ2dnUU7-d_NnZ2d@westnet.com.au>,
Andrew Poulos <ap_prog@hotmail.com> wrote:

Is there some CSS I can add to a collection of checkboxes that stops all
of them from being unselected? So if the user is unselecting checkboxes
the last selected checkbox can't be unselected.

It's too late, I won't try to test it, but I think if you place all your >checkboxes one after the other, as siblings, and the submit button as the >last sibling, you can use the :checked pseudo-class to hide and unhide the >submit button so they can't submit until at least one box is checked.

Here it is:

<html>
<head>
<style>
#submit {display:none;}
#info {display:inline;}
input:checked ~ #submit {display:inline;}
input:checked ~ #info {display:none;}
</style>
</head>
<body>
<form action="#">
1:<input type="checkbox" name="test1" value="1">&mdash;
2:<input type="checkbox" name="test2" value="2">&mdash;
3:<input type="checkbox" name="test3" value="3"><br>
<input type="submit" id="submit">
<span id="info">chose at least one</span>
</form>
</body></html>

Pierre
--
Pierre Jelenc
The Gigometer www.gigometer.com
The NYC Beer Guide www.nycbeer.org

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On 5/12/2020 8:40 am, Pierre Jelenc wrote:

In article <rqcoh3$7na$1@reader1.panix.com>,
Pierre Jelenc <rcpj@panix.com> wrote:

In article <Q8mdnTXeL8q26FTCnZ2dnUU7-d_NnZ2d@westnet.com.au>,
Andrew Poulos <ap_prog@hotmail.com> wrote:

Is there some CSS I can add to a collection of checkboxes that stops all >>> of them from being unselected? So if the user is unselecting checkboxes
the last selected checkbox can't be unselected.

It's too late, I won't try to test it, but I think if you place all your
checkboxes one after the other, as siblings, and the submit button as the
last sibling, you can use the :checked pseudo-class to hide and unhide the >> submit button so they can't submit until at least one box is checked.

Here it is:

<html>
<head>
<style>
#submit {display:none;}
#info {display:inline;}
input:checked ~ #submit {display:inline;}
input:checked ~ #info {display:none;}
</style>
</head>
<body>
<form action="#">
1:<input type="checkbox" name="test1" value="1">&mdash;
2:<input type="checkbox" name="test2" value="2">&mdash;
3:<input type="checkbox" name="test3" value="3"><br>
<input type="submit" id="submit">
<span id="info">chose at least one</span>
</form>
</body></html>

Pierre, and Evertjan, thanks for the ideas. I'll test (a heuristic
analysis ;-) ) to see which is the more "intuitive" behaviour.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In Message: <Mu-dnXtmesCBP1TCnZ2dnUU7-IPNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

On 4/12/2020 10:30 am, Andrew Poulos wrote:

A user is offered a number of choices. A user must select one or
more choices. A collection of radio buttons allows for only one
choice. A collection of checkboxes allows zero or more choices.

Is there some CSS I can add to a collection of checkboxes that
stops all of them from being unselected? So if the user is
unselecting checkboxes the last selected checkbox can't be
unselected. I don't want to use JavaScript to tell the user to
select a check box (if no checkbox is selected).

Perhaps there's some other UI component is more appropriate?

Hmm, a search seems to indicate that this is a common problem with
only a code-based solution :-(

Too hard for me to solve with CSS so I went for some JavaScript
that checks the number of checked checkboxes and rechecks the last
checked checkbox (if the user unchecks it.)

Still it's an "ugly" thing to do (to have a checkbox behave
differently from the norm).

Multiple Select, just a bit of JavaScript in an attempt to make it a
bit more friendly to the touch and to set setCustomValidity message.

If using checkbox, setCustomValidity in place of checking the last
checkbox.

setCustomValidity DOMContentloaded, onchange, reset.

<https://codepen.io/noneyainvalid/full/Exggoaj>


--
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)