We Keep Coding

Checkbox check event validate without Javascript?

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 ?

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.

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.

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)

Can I use label for a label tag?

Usually I used label tag for pointing input tag like this
<label for='firstname'>First Name:</label>
<input type='text' id='firstname' />
Now I have this
<label for='firstname'>First Name:</label>
<label id='firstname'></label>
Since I haven't crossed anything like this before, is it possible to have label tag for a label. Will it work, when I apply Javascript because I have to update the values? or this is a valid w3c compliance?
I'm confused whether to use it or not.

It's invalid according to the W3C validator.
The for attribute of the label element must refer to a form control.

No. Label elements label (primarily) form controls (<input>, <button>, etc), not arbitrary elements.
See the HTML specification:
Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.
button, input (if the type attribute is not in the hidden state), keygen, meter, output, progress, select, textarea

As others have answered, the label element must refer to a control, such as input, so it must not refer to another label element, even syntactically. This restriction is present even in HTML5.
This means that if you read user input using elements other than controls, you can still use labels for them, but you must not use label markup for the label. Normally, text data like names is best read using input type=text. If you cannot use it, or another control, for some reason, then the approach recommended in ARIA specifications is to a semantically neutral element, normally span, and use the ARIA attribute aria-labelledby to specify the connection between a label and the span. Example:
<span id=firstnameLabel>First Name:</span>
<span role=textbox id=firstname aria-labelledby=firstnameLabel></span>
The ARIA attributes are primarily meant for assistive or otherwise accessibility-aware software. They are probably ignored by mainstream browsers.

Label for label is non-conforming. Probably HTML5 output element is what you want?

The Label "For" attribute has to point to a valid ID attribute of a "control" element, http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2 lists valid control elements as
buttons, checkboxes, radio buttons, menus, file select, hidden controls, object controls.
It might work in JS, but it would be invalid HTML

Is there a way to apply the default "disabled" style on a text input without actually disabling the input?

Pretty straightforward. I want the text input to look disabled (browser's default disabled style) but without actually being disabled so I can still sell it trough post.

If you just need to send it throung post you can make the input field as hidden instead of making it look disabled
<input type="hidden" value="yourvalue">
Its not direct way to make it look disabled as disabled input field looks different in every other browser...

If you want to display data that the user can't change, and then send it to a server with a POST then include it as a hidden <input>
<input type=hidden name=myHiddenValue value="My Hidden Value">
It will appear as $_POST['myHiddenValue'] when the form is submitted.
If you need to display it too then you can include it in your HTML, just not as an <input> field.

Difference between read only and disabled in javascript [duplicate]

I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things.

A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit. Another difference is that readonly elements can be focused (and getting focused when "tabbing" through a form) while disabled elements can't.
Read more about this in this great article or the definition by w3c. To quote the important part:
Key Differences
The Disabled attribute
Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to
form check boxes that are not checked.)
Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer
5.5 is particularly nasty about this.
Disabled form elements do not receive focus.
Disabled form elements are skipped in tabbing navigation.
The Read Only Attribute
Not all form elements have a readonly attribute. Most notable, the <SELECT> , <OPTION> , and <BUTTON> elements do not have readonly
attributes (although they both have disabled attributes)
Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
Form elements with the readonly attribute set will get passed to the form processor.
Read only form elements can receive the focus
Read only form elements are included in tabbed navigation.

No events get triggered when the element is having disabled attribute.
None of the below will get triggered.
$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact
While readonly will be triggered.
$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

Disabled means that no data from that form element will be submitted when the form is submitted. Read-only means any data from within the element will be submitted, but it cannot be changed by the user.
For example:
<input type="text" name="yourname" value="Bob" readonly="readonly" />
This will submit the value "Bob" for the element "yourname".
<input type="text" name="yourname" value="Bob" disabled="disabled" />
This will submit nothing for the element "yourname".

Same as the other answers (disabled isn't sent to the server, readonly is) but some browsers prevent highlighting of a disabled form, while read-only can still be highlighted (and copied).
http://www.w3schools.com/tags/att_input_disabled.asp
http://www.w3schools.com/tags/att_input_readonly.asp
A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

If the value of a disabled textbox needs to be retained when a form is cleared (reset), disabled = "disabled" has to be used, as read-only textbox will not retain the value
For Example:
HTML
Textbox
<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />
Reset button
<button type="reset" id="clearButton">Clear</button>
In the above example, when Clear button is pressed, disabled text value will be retained in the form. Value will not be retained in the case of input type = "text" readonly="readonly"

The readonly attribute can be set to keep a user from changing the value until some other conditions have been met while the disabled attribute can be set to keep a user from using the element

The difference between disabled and readonly is that read-only controls can still function and are still focusable, anddisabled controls can not receive focus and are not submitted with the form

How to get the value of a disabled radio button input field

I have a radio button something like this,
<input type="radio" value="A" name="NodeLevel" />
When not disabled I could get the value of a pretty easily
using, $("input[name=NodeLevel]").click(function () {},
but when the input type is disabled, how can I get the value of a radio button ?
any work arounds ?

As per HTML specification, a form element must be "successful" in order to be sent to the server. Disabled elements are not considered successful (as per the same spec). You can make the element readonly or send it as a hidden form element.
this thread here might shed some light to ur problem
How can I get the form value from a disabled <input> element

Have you tried .val()?
$("input[name=NodeLevel]").val()
// returns 'A'
And you can't bind a click event to a disabled element.

I think when your form field is disabled you can not access its value. Use some hidden field to contain the same value and read from there.