info
Grupos de Google ya no admite publicaciones ni suscripciones nuevas de Usenet. El contenido anterior sigue visible.
Dismiss
multiselect radio button
4 vistas
Ir al primer mensaje no leído
Andrew Poulos
3 dic 2020, 6:30:58 p.m.3/12/20
para
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
Andrew Poulos
3 dic 2020, 9:42:42 p.m.3/12/20
para
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
Pierre Jelenc
4 dic 2020, 2:29:43 a.m.4/12/20
para
In article <Q8mdnTXeL8q26FTC...@westnet.com.au>,
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
Andrew Poulos <ap_...@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
>
>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.
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
Evertjan.
4 dic 2020, 4:45:03 a.m.4/12/20
para
rc...@panix.com (Pierre Jelenc) wrote on 04 Dec 2020 in
comp.infosystems.www.authoring.stylesheets:
> In article <Q8mdnTXeL8q26FTC...@westnet.com.au>,
> Andrew Poulos <ap_...@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)
comp.infosystems.www.authoring.stylesheets:
> In article <Q8mdnTXeL8q26FTC...@westnet.com.au>,
> Andrew Poulos <ap_...@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
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)
Pierre Jelenc
4 dic 2020, 4:40:09 p.m.4/12/20
para
In article <rqcoh3$7na$1...@reader1.panix.com>,
<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">—
2:<input type="checkbox" name="test2" value="2">—
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 Jelenc <rc...@panix.com> wrote:
>In article <Q8mdnTXeL8q26FTC...@westnet.com.au>,
>Andrew Poulos <ap_...@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:
>In article <Q8mdnTXeL8q26FTC...@westnet.com.au>,
>Andrew Poulos <ap_...@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.
<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">—
2:<input type="checkbox" name="test2" value="2">—
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>
Andrew Poulos
4 dic 2020, 8:49:50 p.m.4/12/20
para
analysis ;-) ) to see which is the more "intuitive" behaviour.
James Kirk
9 dic 2020, 1:19:48 p.m.9/12/20
para
In Message: <Mu-dnXtmesCBP1TC...@westnet.com.au>
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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜
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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜
0 mensajes nuevos