I have tried but haven't got any solution.
Lets say there is checkbox with label "AGREE TO TERMS AND CONDITIONS". Is it possible to modify color of label text with checkbox checked / unchecked event without using Javascript / Jquery ?
0
Add a comment
|
3 Answers
Aside from the required attribute M. Kejji points out, which is the right way to do this, there's a CSS way as well:
It's possible to do this client-side within restrictions, sort of, but it's ugly. And it doesn't really prevent form submission, it just prevents showing the submit button.
Basically, you can use the CSS :checked pseudo-class and (say) an adjacent sibling combinator to hide the submit button if it's not checked:
.disable-submit + input[type=submit] {
display: none;
}
.disable-submit:checked + input[type=submit] {
display: inline;
}<p>Tick and untick the box</p>
<form>
<input type="checkbox" class="disable-submit">
<input type="submit" value="Send">
</form>I'm not suggesting it, just saying it's possible.
Regardless, usual caveat: Even if you were using JavaScript, everything on the client can be bypassed, and doesn't mean you don't also need server-side validation.
1 Comment
CodeWithCoffee
Thanks @T.J Crowder :)
Yes,
HTML5 has the required attribute for input fields :
<input type="checkbox" name="agree" required /> By clicking this, blablabla
If the user tries to submit the form without checking the box, they will be blocked and have an explicit message thrown by the browser.
1 Comment
T.J. Crowder
Good point, and very much the Right Way To Do It. Sadly IE9 doesn't support it, and more significantly even current Safari apparently doesn't give the user feedback when preventing submission!
The above answer is correct, however, the code provided must be in the context of a form. When the submit element of the form is clicked, the webpage will give an error.
Example Here
Note that the required attribute of an input element is not supported by Apple Safari (according to w3schools)
