I have a form there are 4 options (they may be checkbox or radio).
I want to select multiple options but one is compulsory.
I know it is possible in JS/jQuery but I want a HTML/CSS based solution.
To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)
So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
If you want the appearance of a disabled submit button, add a second button that is disabled.
When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Further to the answer of #Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.
If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.
You can do this in html5 using the required attribute
Like
<input type="checkbox" required name="your_checkbox_name">
This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.
Or
If you want to detect if at least one check box is selected as suggested by #RickHitchcock in the comments,You could use
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>
You can use the following for which one is compulsory.
<input type="radio" name="name" required>
Which one without required will not be tested if it is ticked or not.
Try This:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
Or you can try this using jquery to validate a html checkbox:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required is the way html validates things
Related
I would like to have 2 radio buttons with the default option being a standard radio button with a text label, and the second option having an input field as the label. Without using javascript I wish to have the second radio be selected if the input field receives focus.
The html looks like the following:
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked"/>
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n2" value="v2" id="radio_2"/>
<label for="radio_2">
<input name="n3" value="v3"/>
</label>
</div>
</form>
The label will not work like this because the text input receives the focus on click.
So, without javascript you will not be able to achieve what you want I fear.
One trick: You could position the label above the input text and hide it if the checkbox is checked.
But: You will then have to click twice to give the text input the focus. To make this reasonable to the user, you eg. could hide the border if the checkbox is unchecked and show it if checked.
#mylabel {
display: block;
#background-color: red;
position: relative;
width: 200px;
height: 2em;
left: 2em;
top: -2em
}
#radio_2:checked~#mylabel {
display: none;
}
#radio_2:not(:checked)~#n3 {
border: none;
}
label {
cursor: pointer;
}
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked" />
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n1" value="v2" id="radio_2" />
<input name="n3" value="v3" id="n3" />
<label for="radio_2" id="mylabel"></label>
</div>
</form>
I am working with a bootstrap template and its checkbox template is like this:
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox style-1" checked="checked">
<span>Checkbox 1</span>
</label>
</div>
I need an MVC EditorTemplate for boolean values to use this template.
MVC CheckBoxFor default template is not like this template, it has another hidden input field to hold data and there is no span to show checkbox icon (it uses a default icon not stylable by css).
MVC CheckBoxFor default template :
<input checked="checked" data-val="true" data-val-required="required." id="IsActive"
name="IsActive" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="false">
I tried many ways to do this with no success. For example if I use a conditional template like below, it does not return value after submit.
My Boolean EditorTemplate:
#model Boolean?
<div class="checkbox">
<label>
#if (Model.Value)
{
<input id="#ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="#ViewData.TemplateInfo.GetFullHtmlFieldId("")"
type="checkbox" class="checkbox style-1" checked="checked" value="true" />
}
else
{
<input id="#ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="#ViewData.TemplateInfo.GetFullHtmlFieldId("")"
type="checkbox" class="checkbox style-1" value="false" />
}
<span>#Html.LabelFor(m => m)</span>
</label>
</div>
Can anyone help please?
Update:
A part of css codes relevent to checkbox icon :
label input[type=checkbox].checkbox + span:before {
font-family: FontAwesome;
font-size: 12px;
border-radius: 0;
content: " ";
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 1px;
height: 12px;
line-height: 12px;
min-width: 12px;
margin-right: 5px;
border: 1px solid #bfbfbf;
background-color: #f4f4f4;
font-weight: 400;
margin-top: -1px;
}
label input[type=checkbox].checkbox + span:before {
content: " ";
}
label input[type=checkbox].checkbox:checked + span:before {
content: "";
color: #2e7bcc;
}
label input[type=checkbox].checkbox:checked + span {
font-weight: 700;
}
The CheckBoxFor() method generate 2 inputs to ensure a value is posted back (unchecked checkboxes to not submit a value so the hidden input ensures false is submitted), and you should not attempt to change this behavior. Your attempt at an EditorTempate could not work for a number of reasons including a checkbox (which has 2 states) cannot bind to a nullable bool (which has 3 states) and your else block means that a vale of false will always be submitted, even if the checkbox is checked.
Instead, use the CheckBoxFor() method, but adjust your css selectors
<div class="checkbox">
<label>
#Html.CheckBoxFor(m => m.IsActive, new { #class = "checkbox style-1" })
<span>Checkbox 1</span>
</label>
</div>
will generate
<div class="checkbox">
<label>
<input type="checkbox" name="IsActive" class="checkbox style-1" ... value="true">
<input type="hidden" name="IsActive" value="false">
<span>Checkbox 1</span>
</label>
</div>
So your current selector
label input[type=checkbox].checkbox + span:before {
which gets the span element placed immediately after the checkbox element needs to be changed to
label input[type=checkbox].checkbox ~ span:before {
And ditto for the other selectors (i.e. change + to ~). The ~ selector matches the second element if it is preceded by the first, and both share a common parent (refer General sibling selectors)
I have a checkbox input control and I have a CSS file which includes the following declaration:
input[type="checkbox"] {
display:none;
}
I want this CSS to be be applied to any checkbox input element except one. How can I ignore this CSS rule(display:none;) on one of my controls?
All you need to do is target that specific checkbox and give it a display of initial.
You haven't provided any HTML so I'm going to have to make up a generic example:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"].bar {
display: initial;
}
<input type="checkbox" class="foo" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="baz" />
You can simply do something like:
input[type="checkbox"]:not(.this_one) {
display: none;
}
Note: Replace this_one with the ID or class of the one you want to exempt(leave out)
See working example here
As you can see by the other solutions, there are many ways to accomplish what you want. Another way is to use the "cascading" aspect of cascading style sheets by overriding the style within the element:
input[type="checkbox"] {
display: none;
}
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" style="display:initial" />
Just use a class to add this css property (and possibly others) and omit the class for the needed element
input[type="checkbox"].yourClass
{
display:none;
}
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike"> The one without the class
So i'm using a checkbox hack in order to change 3 buttons on click, when someone clicks one it changes to a selected button image, then someone clicks on another button it changes the other button back to the original image and the new other clicked button goes to select. The problem is I can't figure out how to have 3 different selected states. One for each color. Right now it just uses the greenbtn-selected obviously, how would I add more than one so that each button had it's own selected state?
Also for some reason content:url isn't working on Firefox? Is there another way to do it, I tried background:url and that doesn't work in Chrome! ugh.
Thanks so much!!!
The selected button images..
http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png
The Buttons..
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>
The CSS...
label > input + img {
cursor: pointer;
}
label > input {
position: absolute;
visibility: hidden;
width: 130px;
}
label > input:checked + img {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}
label > input + img {
cursor: pointer;
}
label > input {
position: absolute;
visibility: hidden;
width: 130px;
}
label > input: checked + img {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>
dont use image use a <div> or span
JS Fiddle
give a background image and use pseudo before changing the image
html
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<span class="check-green"></span>
</label>
css
.check-green {
background:url(http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png);
width:124px;
height:30px;
}
label > input:checked + span:before {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
display:block;
}
You can use Javascript and register a click event for each of the buttons. Something like this;
Jquery
$('button1').click(function(){
//do necessary changes
});
I have some problem when i try to change the color of a div using input tags. If the div is in the same section of the inputs it works perfect. But if i try to put the div in the footer, for example, stop working.
HTML:
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
CSS:
.colorDiv{
width:50px;
height:50px;
background-color:red;
}
#select2:checked ~ .colorDiv{
background-color:green;
}
#select3:checked ~ .colorDiv{
background-color:blue;
}
Here is an example: http://jsfiddle.net/cqscc48g
There is any way to achieve that?
Thanks
Css is a cascading renderer. So it follows the DOM element's structure. Therefore, you can only relate elements that are descendants or, at least following siblings.
You have two options:
1 - Adjust your HTML:
You don't even need to put the div inside the input's section. But at least, you'd have to let the inputs out of the section, to make a "nephew" selector. (of course this denomination does not exists ;) )
JsFiddle - Changin HTML
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<footer>
<div class="colorDiv"></div>
</footer>
And then you can select:
#select2:checked ~ footer .colorDiv{
background-color:green;
}
#select3:checked ~ footer .colorDiv{
background-color:blue;
}
2 - Use a Javascript approach:
If you love your HTML structure so much, then you must go Javascript. You can make it a lot sharper, but just an example:
JsFiddle - Using Javascript
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
Change your markup and go through comments in code,
.colorDiv {
width: 50px;
height: 50px;
background-color: red;
}
#select2:checked~.colorDiv {
background-color: green;
}
#select3:checked~.colorDiv {
background-color: blue;
}
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<div class="colorDiv"></div>
<!-- this should be adjacent as per your css selectors -->
</section>
Fiddle
If you want click inside somewhere div and hover any of body div than set input at the top outside..
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox]:checked ~ div.content{
display:none;
}
</style>
<input type="checkbox" id="toogle-content"/>
<div>
<label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
I can toggle now ;)
</div>
Use .change() for every input. On change check id from clicked input and then change color of that div