Related
I have a search button on the page, and when users press the search button, the search bar comes into the screen and I would also like to set the input to focus as well. Can I do this with pure CSS3?
Here is the code:
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<label for="Search_Button">
<div id="Search_Container" class="Button_Container">
<img src="SVG/Search.svg" class="Button" id="Search" />
</div>
</label>
Here you can see the CSS styling so that the search bar is pushed off the screen:
#Search_Box {
position: absolute;
width: 100vw;
height: 8vh;
background-color: #38D1A9;
transform: translate3d(0, -8vh, 0);
transition: transform .2s ease-out;
}
Here is the search box that drops down:
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
</div>
So here is the issue. I have a search icon displayed. When the search icon is pressed, it brings down the "Search_Box" which has the search input inside it. I would like to, when that search icon is pressed, immediately make that search box focused.
The issue with a label technique is that, while it works exactly as intended, the search icon is already inside a label (this label it sits inside is to bring down the search box into view), so I won't be able to wrap it in another label.
I tried to do this:
#Search_Button:checked ~ div #Search_Input {
cursor: pointer;
}
I tried saying that when the Search_Button was checked, it would bring the search input to focus, but it's definitely not the way to do it. I'm trying to avoid using JS if I can because I'm working on mobile.
I really apologize for any confusion!
You can achieve this with native HTML behavior by associating a label element with the input element. Set the label element's for attribute equal to the input element id attribute value. When the label element is clicked, the input element will be focused on.
Example without JavaScript:
label {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 1px 6px;
}
<label for="focus-input">Button</label>
<p>Other elements...</p>
<input type="text" id="focus-input" />
It's worth mentioning that the CSS above isn't required. It was only added to make the label element appear at a button. Feel free to style the label element however you want. In certain cases, you can even wrap it around other elements.
Alternative example with different styling:
label {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<label for="focus-input">Button</label>
<p>Other elements...</p>
<input type="text" id="focus-input" />
Alternative example with JavaScript:
document.querySelector('button').addEventListener('click', function () {
document.getElementById('focus-input').focus();
});
<button>Button</button>
<p>Other elements...</p>
<input type="text" id="focus-input" />
I'm trying to replace checkbox/radio inputs with icons. For this, I need to hide the original checkbox/radio. The problem is, I also want the form to properly support keyboard input, i.e. let the input remain focusable by Tab key and selectable using Spacebar. Since I'm hiding the input, it cannot be focused, so instead, I'm trying to make its <label> focusable.
This documentation and various other sources led me to believe I can do that using tabindex attribute (corresponding to HTMLElement.tabIndex property). However, when I try to assign tabindex to my label, it remains as unfocused as ever, however much I try to Tab to it.
Why doesn't tabindex make the label focusable?
The following snippet demonstrates the issue. If you focus the input with your mouse and try focusing the label using Tab, it doesn't work (it focuses the following <span> with tabindex instead).
document.getElementById('checkbox').addEventListener('change', function (event) {
document.getElementById('val').innerHTML = event.target.checked;
});
<div>
<input type="text" value="input">
</div>
<div>
<label tabindex="0">
<input type="checkbox" id="checkbox" style="display:none;">
checkbox: <span id="val">false</span>
</label>
</div>
<span tabindex="0">span with tabindex</span>
(The JavaScript code just allows to see that clicking on the label properly (un)checks the checkbox.)
Why doesn't tabindex make the label focusable?
Short Answer:
Label is focusable.
TabIndex won't make any difference.
Welcome to the world of browser/agent inconsistencies.
tl;dr;
The label (Ref) element is very much focusable. Its DOM Interface is HTMLLabelElement which derives from HTMLElement (Ref) which in turn implements GlobalEventHandlers (Ref) and hence exposes the focus() method and onfocus event handler.
The reason you are unable to get hold of proper specification / reference document for labels focus behaviour, is because you might have been looking at HTML5 Specs. Interestingly, HTML5 refs do not state anything relating to that, which adds to the confusion.
This is mentioned in the HTML 4.01 Ref here: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Specifically near the end of section 17.9.1 and just before 17.10:
When a LABEL element receives focus, it passes the focus on to its
associated control.
Also, elsewhere (I am unable to get hold of that part of the ref) I have read that it depends on the implementing agent. (Don't take my word for that, am not too sure).
However, what it means is that when you focus a label (or a label received a focus), that focus is passed on to its associated labeleable control. This will not result in two different focuses, but one focus on the input (in your case a checkbox). Because of this behaviour, tabindex property cannot play a role.
There is also a test suite by W3C for website accessibility (WAAG) here: http://www.w3.org/WAI/UA/TS/html401/cp0102/0102-ONFOCUS-ONBLUR-LABEL.html which, discusses the implementation of onfocus and onblur for a label. Ideally a keyboard or an assistive technology that emulates the keyboard should implement this. But...
This is where the browser inconsistencies play their role.
This can be demonstrated by this example. Check the following snippet in different browsers. (I have tested it against IE-11, GC-39 and FF-34. All of them behave differently.)
Click the button "Focus Label"
It should focus the label, then pass the focus and highlight its associated checkbox outline in blue.
Chrome-v39 works. IE-v11 it doesn't (somehow html and body do respond to :focus). FF-v34 it works.
Talking about browser inconsistencies, try using the "access key" L. Some browsers will focus the checkbox whereas some will click it i.e. pass the action to it.
Here is a fiddle to test it: http://jsfiddle.net/abhitalks/ff0xds4z/2/
Here is a snippet:
label = $("label").first();
$("#btn").on("click", function() {
label.focus();
});
* { margin: 8px; }
.highlight { background-color: yellow; }
:focus {
outline: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" value="input" /><br />
<label for="chk" accesskey="L">Checkbox: </label>
<input id="chk" type="checkbox" /><br />
<input id="btn" type="button" value="Focus Label" />
Hope that clears up your doubts.
.
Your problem:
Now focussing (sic) on your original problem of not being able to focus a label, because you want to style a checkbox differently by placing an icon kind of thing in its place.
In order to do that, one option for you is to not hide it completely by doing a display:none;. Rather, make it 1x1 pixel and shove it under your icon. This way it will still receive focus naturally and yet be effectively hidden.
For example, if your icons are a checkmark and a cross, then change the position of the checkbox and make the icons out of ::before or ::after pseudo-elements on the label. That will cause the checkbox to still receive focus, and make the icon respond to that. That will give the apparent illusion of the icon taking the focus.
Demo Fiddle: http://jsfiddle.net/abhitalks/v0vxcw77/
Snippet:
div.chkGroup { position: relative; }
input#chk {
position: absolute;
width: 1px; height: 1px;
margin: 0; margin-top: 4px; outline: none;
border: 1px solid transparent; background-color: transparent;
}
label::before {
content: '\2714';
position: relative;
width: 18px; height: 18px;
background-color: #fff;
margin-right: 8px; padding: 2px;
display: inline-block;
border: 1px solid transparent;
}
input#chk:checked + label::before {
content: '\2716';
}
input#chk:focus + label::before {
border: 1px solid #00f;
}
<input id="txt" type="text" value="input" /><br /><br />
<div class="chkGroup">
<input id="chk" type="checkbox" />
<label for="chk" accesskey="L">Checkbox</label>
</div>
.
Since this old post is one of the top google results for html label tabindex I want to add my very simple working solution. As #Abhitalks mentioned in the accepted answer, the focus of a label is passed to it's associated control. So to bypass this behavior, just add a tabindex to the label and use event.preventDefault() in a focus EventListener.
#Heretic Monkey kind of had the right idea in his answer but you don't need a wrapper element to achieve this. You will, however, need to manually forward any required keystrokes (like spacebar) through.
For example:
'use strict';
let field = document.getElementById('hidden-file-chooser');
let label = document.querySelector('label[for=hidden-file-chooser]');
// prevent focus passing
label.addEventListener('focus', event => {
event.preventDefault();
});
// activate using spacebar
label.addEventListener('keyup', event => {
if (event.keyCode == 32) {
field.click();
}
});
#hidden-file-chooser {
display: none;
}
input[type=text] {
display: block;
width: 20rem;
padding: 0.5rem;
}
label[for=hidden-file-chooser] {
display: inline-block;
background: deepskyblue;
margin: 1rem;
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.7);
cursor: pointer;
}
<input type="text" placeholder="Click here and start tabbing through ...">
<input id="hidden-file-chooser" type="file">
<label for="hidden-file-chooser" tabindex="0"> Select a File </label>
<input type="text" placeholder="... then shift+tab to go back.">
P.S: I used input[type=file] in my example because that's what I was working on when I ran across this issue. The same principles apply to any input type.
Edit: The following was a misreading of the spec:
Looking that the full
specification,
you'll see that there is something called tabindex focus
flag,
which defines if the tabindex attribute will actually make the field
"tabbable". The label element is missing from that list of suggested
elements.
But then again, so is the span element, so go figure :).
That said, yYou can make the label text focusable by wrapping the whole thing in an another element, or using some JavaScript to force the issue. Unfortunately, wrapping (here in an anchor) can men a fair amount of extra work in CSS and JS to get working like a normal label element.
document.getElementById('checkbox').addEventListener('change', function(event) {
document.getElementById('val').innerHTML = event.target.checked;
});
document.getElementsByClassName('label')[0].addEventListener('click', function(event) {
event.target.getElementsByTagName('label')[0].click();
event.preventDefault();
});
document.getElementsByClassName('label')[0].addEventListener('keypress', function(event) {
if ((event.key || event.which || event.keyCode) === 32) {
event.target.getElementsByTagName('label')[0].click();
event.preventDefault();
}
});
.label,
.label:visited,
.label:hover,
.label:active {
text-decoration: none;
color: black;
}
<div>
<input type="text" value="input">
</div>
<div>
<a class="label" href="#">
<label tabindex="0">
<input type="checkbox" id="checkbox" style="display:none;">checkbox: <span id="val">false</span>
</label>
</a>
</div>
<span tabindex="0">span with tabindex</span>
As previous posters said:
Label focus always goes directly to the input element.
Quite an annoyance if somebody has fancy (but fake) checkboxes, hiding the original ones, with an actual focus for keyboard navigation nowhere to be seen.
best solution I can think of: javascript.
Style-away the actual focus, in favor of a fake one:
input[type=checkbox]:focus {
outline: none;
}
.pseudo-focus {
outline: 2px solid blue;
}
and watch for changes on the (in many scenarios visibly hidden) original checkbox:
$('input[type=checkbox')
.focus( function() {
$(this).closest('label').addClass('pseudo-focus');
})
.blur( function() {
$(this).closest('label').removeClass('pseudo-focus');
});
Full jsfiddle here.
For input type radio or checkbox:
opacity: 0;
height: 0;
width: 0;
min-height: 0;
line-height: 0;
margin: 0;
padding: 0;
border: 0 none;
and the Js above does the trick sweetly.
I'm working on a sidebar for my personal website and I'm looking to show/hide a Facebook follow button when visitors click on a Facebook icon. I am wondering if it is possible with stricly HTML/CSS and if not, what would be the easiest way to do it with JavaScript. I've seen many jQuery solutions around but I have yet to find a purely HTML/CSS one.
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
<div class="sidebar-follow-button">
This is the follow button.
</div>
</div>
Clicking on .sidebar-follow-icon should reveal .sidebar-follow-button and clicking again on .sidebar-follow-icon show hide .sidebar-follow-button.
Html
<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>
CSS
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
.facebook {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
display: none;
}
fiddle Here And more About this csstricks
This is honestly not typically done in HTML / CSS. It's best suited for Javascript, JQuery, and the like.
But it got me thinking... is it possible.
And here's what I came up with that I think is the closest that you can get using pure CSS: http://jsfiddle.net/a92pkeqw/
My reasoning: the only element that can save it's 'state' is the checkbox. This is, therefore, the only element that can produce a toggling effect. Using the toggle and the ~ selector in CSS, it was possible to edit the styling of another element, in this case change the visibility property.
HTML:
<input type="checkbox" class="toggle"></input>
<div class="toggled">
Text that be hidden dynamically!
</div>
CSS:
input[type='checkbox']:checked ~ .toggled
{
visibility: hidden;
}
input[type='checkbox'] ~ .toggled
{
visibility: visible;
}
Using a check box it is possible, but I prefer to use javascript for interactivity.
#fbCheck {
display:none;
}
#fbCheck:not(:checked) ~ .sidebar-follow-button
{
display:none;
}
#fbCheck:checked ~ .sidebar-follow-button
{
display:block;
}
<div class="sidebar-follow">
<input type="checkbox" id="fbCheck" />
<label for="fbCheck">
<div class="sidebar-follow-icon">
<img src="/follow_facebook.jpg" alt="Follow on Facebook" height="32" width="160">
</div>
</label>
<div class="sidebar-follow-button">This is the follow button.</div>
</div>
On a side note, do you really want your users to be doing something with two clicks when it can be done with one?
We had a similar need for a CSS-only solution, and found that this works with these conditions: (1) the checkbox "button" and items to be toggled are all within the same overall container, such as body or div or p, and items to be toggled are not separated by being in a sub-container, and (2) the label and checkbox input must be defined ahead of the items to be toggled.
I think you can't do it without JavaScript.
The easy way (but not the best) is add the onclick attribute to the <div> tag.
This example use pure JS
JS
function toggleImage(){
var div = document.getElementsByClassName('sidebar-follow-icon')[0];
if (!div.style.display || div.style.display === 'block') div.style.display = 'none';
else div.style.display = 'block';
}
HTML
<div class="sidebar-follow">
<div class="sidebar-follow-icon">
<h1>a</h1>
</div>
<div class="sidebar-follow-button" onclick="toggleImage();">
This is the follow button.
</div>
</div>
*Is not a good practice attach javascript through the html, instead that you should attach the click event using the addEventListener function.
In IE11, the following piece of code will check the radio button as expected:
<input type="radio" id="myRadio" />
<label for="myRadio">
<img src="..." />
</label>
Wrapping a <form> around the above will however break the functionality of the label.
This SO post offers a solution to the problem by styling the image with pointer-events:none, and the label as a block-level element.
While that should of course not even be necessary, it also disables the ability to handle mouse events.
It would be much appreciated if someone can offer a pure CSS solution to this problem.
PS:
One thing worth mentioning, is that in IE11, if the image is styled as a block-level element, then pointer-events seems to loose its effects.
My markup looks like this (classes and other superfluous attributes removed):
<li>
<label>
<figure>
<img>
</figure>
<div>
<label></label>
<input type="radio">
</div>
</label>
</li>
It's a bit messy because some of it is auto-generated by Drupal. It didn't work in IE 11, but I made it work by adding:
img {
pointer-events: none;
}
I didn't need to change anything else and I have no other special css-trickery that I can see.
As I answered previously in the referred question, there is a pure CSS way.
If your image is display: block that fix can still be used, even tho you have to add some more trickery. For example:
CSS:
label img{
display: block; /* requirement */
/* fix */
pointer-events: none;
position: relative;
}
/* fix */
label{
display: inline-block;
position: relative;
}
label::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
HTML:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>
Fiddle
If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)
img {
pointer-events: none;
position: relative;
z-index: -1;
}
This solved it in my case.
The img will be placed behind the label but "shine through".
I hope it helps.
You can put the image in the background of the label..
<label for="myField1" ><img src="image1.jpg"></label>
becomes
<style>
#lblMyField1 {
background-image: url('image1.jpg');
background-position: center center;/* depend..*/
background-repeat: no-repeat;
}
</style>
<label id="lblMyField1" for="myField1" > </div>
This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.
Nest Your Input
<label>
<input />
<img />
</label>
This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.
JavaScript Patch
Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:
$("label[for]").each(function () {
var timeout;
var element = $("#" + $(this).attr("for"));
$(this).on("click", function () {
timeout = setTimeout(function () {
element.click();
}, 100);
});
element.on("click", function () {
clearTimeout(timeout);
});
});
Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.
Demo: http://jsfiddle.net/CG9XU/
One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:
$(document).on("click", "label[for]", function () {
var timeout;
var element = $("#" + $(this).attr("for"));
timeout = setTimeout(function () {
element.click();
}, 100);
element.one("click", function () {
clearTimeout(timeout);
});
});
The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.
Here is a solution that worked for me using pointer-events:none without having to set my image to position:relative as I needed it to be position:absolute for my design.
HTML
`<form>
<input id="radio-button-action" type="radio" name="search" value="open">
<label for="radio-button-action">
<div class="img-wrapper">
<img src="images/image.jpg" alt="image">
</div>
</label>
</form>`
CSS
So in this example we have an image that needs to be position: absolute
img {
position: absolute
top: 10px;
right: 10px;
height: 25px;
width: 25px;
display: inline-block; /* can be block, doesn't matter */
}
Now set pointer-eventson the img-wrapper div
.img-wrapper {
position: relative /* this is required for this to work */
pointer-events: none /* this is what will make your image clickable */
}
It works with
img {
pointer-events: none;
}
Is it possible to disable form fields using CSS? I of course know about the attribute disabled, but is it possible to specify this in a CSS rule? Something like -
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
disabled: true; /* Does not work */
}
</style>
The reason I'm asking is that, I have an application where the form fields are autogenerated, and fields are hidden/shown based on some rules (which run in Javascript). Now I want to extend it to support disabling/enabling fields, but the way the rules are written to directly manipulate the style properties of the form fields. So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal.
It's very curious that you have visible and display properties in CSS but not enable/disable. Is there anything like it in the still-under-works HTML5 standard, or even something non-standard (browser specific)?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
This can be helpful:
<input type="text" name="username" value="admin" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Update:
and if want to disable from tab index you can use it this way:
<input type="text" name="username" value="admin" tabindex="-1" >
<style type="text/css">
input[name=username] {
pointer-events: none;
}
</style>
Since the rules are running in JavaScript, why not disable them using javascript (or in my examples case, jQuery)?
$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable
UPDATE
The attr function is no longer the primary approach to this, as was pointed out in the comments below. This is now done with the prop function.
$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable
It's very curious that you have visible and display properties in CSS but not enable/disable.
You're misunderstanding the purpose of CSS. CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
You can't use CSS to disable Textbox.
solution would be HTML Attribute.
disabled="disabled"
The practical solution is to use CSS to actually hide the input.
To take this to its natural conclusion, you can write two html inputs for each actual input (one enabled, and one disabled) and then use javascript to control the CSS to show and hide them.
I am always using:
input.disabled {
pointer-events:none;
color:#AAA;
background:#F5F5F5;
}
and then applying the css class to the input field:
<input class="disabled" type="text" value="90" name="myinput" id="myinput">
first time answering something, and seemingly just a bit late...
I agree to do it by javascript, if you're already using it.
For a composite structure, like I usually use, I've made a css pseudo after element to block the elements from user interaction, and allow styling without having to manipulate the entire structure.
For Example:
<div id=test class=stdInput>
<label class=stdInputLabel for=selecterthingy>A label for this input</label>
<label class=selectWrapper>
<select id=selecterthingy>
<option selected disabled>Placeholder</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
</label>
</div>
I can place a disabled class on the wrapping div
.disabled {
position : relative;
color : grey;
}
.disabled:after {
position :absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
content :' ';
}
This would grey text within the div and make it unusable to the user.
My example JSFiddle
input[name=username] {
disabled: true; /* Does not work */ }
I know this question is quite old but for other users who come across this problem, I suppose the easiest way to disable input is simply by ':disabled'
<input type="text" name="username" value="admin" disabled />
<style type="text/css">
input[name=username]:disabled {
opacity: 0.5 !important; /* Fade effect */
cursor: not-allowed; /* Cursor change to disabled state*/
}
</style>
In reality, if you have some script to disable the input dynamically/automatically with javascript or jquery that would automatically disable based on the condition you add.
In jQuery for Example:
if (condition) {
// Make this input prop disabled state
$('input').prop('disabled', true);
}
else {
// Do something else
}
Hope the answer in CSS helps.
You cannot do that I'm afraid, but you can do the following in jQuery, if you don't want to add the attributes to the fields. Just place this inside your <head></head> tag
$(document).ready(function(){
$(".inputClass").focus(function(){
$(this).blur();
});
});
If you are generating the fields in the DOM (with JS), you should do this instead:
$(document).ready(function(){
$(document).on("focus", ".inputClass", function(){
$(this).blur();
});
});
This can be done for a non-critical purpose by putting an overlay on top of your input element. Here's my example in pure HTML and CSS.
https://jsfiddle.net/1tL40L99/
<div id="container">
<input name="name" type="text" value="Text input here" />
<span id="overlay"></span>
</div>
<style>
#container {
width: 300px;
height: 50px;
position: relative;
}
#container input[type="text"] {
position: relative;
top: 15px;
z-index: 1;
width: 200px;
display: block;
margin: 0 auto;
}
#container #overlay {
width: 300px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: rgba(255,0,0, .5);
}
</style>
There's no way to use CSS for this purpose.
My advice is to include a javascript code where you assign or change the css class applied to the inputs.
Something like that :
function change_input() {
$('#id_input1')
.toggleClass('class_disabled')
.toggleClass('class_enabled');
$('.class_disabled').attr('disabled', '');
$('.class_enabled').removeAttr('disabled', '');
}
.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
Input: <input id="id_input1" class="class_enabled" />
<input type="button" value="Toggle" onclick="change_input()";/>
</form>
A variation to the pointer-events: none; solution, which resolves the issue of the input still being accessible via it's labeled control or tabindex, is to wrap the input in a div, which is styled as a disabled text input, and setting input { visibility: hidden; } when the input is "disabled".
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
div.dependant {
border: 0.1px solid rgb(170, 170, 170);
background-color: rgb(235,235,228);
box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
visibility: hidden;
}
<form>
<label for="chk1">Enable textbox?</label>
<input id="chk1" type="checkbox" />
<br />
<label for="text1">Input textbox label</label>
<div class="dependant">
<input id="text1" type="text" />
</div>
</form>
The disabled styling applied in the snippet above is taken from the Chrome UI and may not be visually identical to disabled inputs on other browsers. Possibly it can be customised for individual browsers using engine-specific CSS extension -prefixes. Though at a glance, I don't think it could:
Microsoft CSS extensions, Mozilla CSS extensions, WebKit CSS extensions
It would seem far more sensible to introduce an additional value visibility: disabled or display: disabled or perhaps even appearance: disabled, given that visibility: hidden already affects the behavior of the applicable elements any associated control elements.