Enabling/Disabling Inputs Based on Checkbox Activity

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



Leave a reply



Submit