Enabling/Disabling inputs based on checkbox activity
Your script executes before your HTML loads, so this doesn't find anything:
document.getElementById('average_price')
Move the script to the bottom of the page, traditionally just inside the </body>
tag.
Enable or disable a input fields with checkbox
You can simply use classList with add and remove function to add custom class .disable_section
to show disabled on your section.
Live Demo:
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_register").classList.add('disable_section')
} else {
document.getElementById("user_register").classList.remove('disable_section')
}
}
.disable_section {
pointer-events: none;
opacity: 0.4;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
Enable/disable all inputs and checkboxes with any checked checkbox
select all the form elements and loop through and check for id same as clicked element id.if so don't disabled it.
function enableDisableAll(e) { var own = e; var form = document.getElementById("myForm"); var elements = form.elements;
for (var i = 0 ; i < elements.length ; i++) { if(own !== elements[i] ){ if(own.checked == true){ elements[i].disabled = true; }else{ elements[i].disabled = false; } }
} }
function clearAll(){ document.getElementById("myForm").reset();}
<form id="myForm">
Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll(this);" /> <input type="text" id="id1" name="name1" /><br>
Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll(this);" /> <input type="text" id="id2" name="name2" /><br>
Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll(this);" /> <input type="text" id="id3" name="name3" /><br>
</form>
<input class="field button2" type="button" value="Clear form" size="10" onclick="clearAll(this);">
enabled and disabled text input on checkbox checked and unchecked
You just need to add a !
in front of this.checked
.
Here's an example that shows the change:
document.getElementById('yourBox').onchange = function() { document.getElementById('yourText').disabled = !this.checked;};
<input type="text" id="yourText" disabled /><input type="checkbox" id="yourBox" />
How to enable/disable input field depending on checkbox with Reactstrap
You need to use state to keep track of the check status
function HelloWorld() {
const [isChecked, setIsChecked] = React.useState(false)
return (
...
<FormGroup check>
<Label check>
<Input type="checkbox" id="mpCheckbox" onChange={(e) => setIsChecked(e.target.checked)} />
<Label for="mpinput">Input Field</Label>
<Input type="text" name="pmInput" id="pmInput" disabled={isChecked} />
</Label>
</FormGroup>
)
}
export default HelloWorld;
In your code the if has no access to the e
variable, it is only defined in the scope of the onChange
callback, you need to use it to set the state inside of that callback, then you are able to use the checked status somewhere else.
I moved the input on the return, but your if
would also work with the isChecked
enable/disable input field depending on checkbox status
You should make use of ifChanged
custom event:
$('input').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat'
})
.on('ifChanged', function() {
$('#upload_image:input').prop('disabled', this.checked);
})
.trigger('ifChanged');
Demo: http://jsbin.com/neheqocilu/2/edit
Jquery - Disable INPUT Based on Checkbox
$('[name^="u_"]').change(function(){
if($(this).is(":checked"))
{
$(this).next("input").attr("disabled",true);
}
else
{
$(this).next("input").attr("disabled",false);
}
});
Demo
checkbox to disable/enable input
Here, a jQuery solution:
$("input:checkbox").click(function() {
$("input:text").attr("disabled", !this.checked);
});
Just replace these generic selectors with your more specific ones.
In addition to this code, you will probably also want to make the text-box disabled (initially).
<input type="text" disabled="disabled" />
Working demo: http://www.jsfiddle.net/H8VPY/11/
How to disable enable a checkbox based on another checkbox?
I used jQuery here for the sake of simplicity.
$("input[name='yes[]']").change(function() { //When checkbox changes
var checked = $(this).attr("checked");
$(this).next().attr("disabled", !checked); //The next checkbox will enable
}); // or disable based on the
// checkbox before it
Demo: http://jsfiddle.net/DerekL/Zdf9d/
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/1/
Update
It will uncheck the first checkboxes when the Special checkbox is checked.
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/2/
More Updates
Here's the demo:
Pure JavaScript: http://jsfiddle.net/DerekL/Zdf9d/3/
jQuery: http://jsfiddle.net/DerekL/Zdf9d/4/
Little note: document.querySelectorAll
works on all modern browsers and IE8+ including IE8. It is always better to use jQuery if you want to support IE6.
Related Topics
Barcode Scanner for Mobile Phone for Website in Form
Can We Call the Function Written in One JavaScript in Another Js File
Html Anchor Tag With JavaScript Onclick Event
How to Pass Django Variable into JavaScript
Modify Classname When Element Is Clicked in React
How to Convert Image to Byte Array Using JavaScript Only to Store Image on SQL Server
How to Access a Model Attribute With JavaScript Variable
Bootstrap Modal Hide Not Working With Jquery Ajax
Javascript Passing Element Id as Argument
Why Am I Getting Undefined as an Answer When Fetching Data from an API
Changing Svg Image Color With JavaScript
Connection Refused! Is Selenium Server Started
How to Change Image When Two Buttons Are Clicked
How to Call a Function When Element Is Loaded At Angular
Check If My HTML Table Is Empty Using JavaScript
React | How to Add Dynamic New Divs Like Rows
I Want to Change the Page Background Color, But It Doesn't Work as I Expect in Chrome