Disabling and enabling a html input button
Using Javascript
Disabling a html button
document.getElementById("Button").disabled = true;
Enabling a html button
document.getElementById("Button").disabled = false;
Demo Here
Using jQuery
All versions of jQuery prior to 1.6
Disabling a html button
$('#Button').attr('disabled','disabled');
Enabling a html button
$('#Button').removeAttr('disabled');
Demo Here
All versions of jQuery after 1.6
Disabling a html button
$('#Button').prop('disabled', true);
Enabling a html button
$('#Button').prop('disabled', false);
Demo Here
P.S. Updated the code based on jquery 1.6.1 changes. As a suggestion, always use the latest jquery files and the prop()
method.
How do I enable/disable a button based on a specific input value?
if(value.includes('your string')) {
buttonElement.disabled = true
} else {
buttonElement.disabled = false
}
If you use this pattern in onChange event it would always be updated based on the value
const buttonElement = document.querySelector('button')
const inputElement = document.querySelector('input')
inputElement.addEventListener('change', (e) => {
if(e.target.value.includes('old.company.com')){
buttonElement.disabled = false
} else {
buttonElement.disabled = true
}
}
This is how I validate form fields if its not too complicated,
you could also use regex match with this pattern.
How do I disable a Button in Flutter?
I think you may want to introduce some helper functions to build
your button as well as a Stateful widget along with some property to key off of.
- Use a StatefulWidget/State and create a variable to hold your condition (e.g.
isButtonDisabled
) - Set this to true initially (if that's what you desire)
- When rendering the button, don't directly set the
onPressed
value to eithernull
or some functiononPressed: () {}
- Instead, conditionally set it using a ternary or a helper function (example below)
- Check the
isButtonDisabled
as part of this conditional and return eithernull
or some function. - When the button is pressed (or whenever you want to disable the button) use
setState(() => isButtonDisabled = true)
to flip the conditional variable. - Flutter will call the
build()
method again with the new state and the button will be rendered with anull
press handler and be disabled.
Here's is some more context using the Flutter counter project.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool _isButtonDisabled;
@override
void initState() {
_isButtonDisabled = false;
}
void _incrementCounter() {
setState(() {
_isButtonDisabled = true;
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("The App"),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
_buildCounterButton(),
],
),
),
);
}
Widget _buildCounterButton() {
return new RaisedButton(
child: new Text(
_isButtonDisabled ? "Hold on..." : "Increment"
),
onPressed: _isButtonDisabled ? null : _incrementCounter,
);
}
}
In this example I am using an inline ternary to conditionally set the Text
and onPressed
, but it may be more appropriate for you to extract this into a function (you can use this same method to change the text of the button as well):
Widget _buildCounterButton() {
return new RaisedButton(
child: new Text(
_isButtonDisabled ? "Hold on..." : "Increment"
),
onPressed: _counterButtonPress(),
);
}
Function _counterButtonPress() {
if (_isButtonDisabled) {
return null;
} else {
return () {
// do anything else you may want to here
_incrementCounter();
};
}
}
Disable and enable button by over or under age 18 Javascript
You can assign false
to the disabled
attribute. Also, as your code stands, you can omit the condition simply using the else
block.
Demo:
var ageEl = document.getElementById('age');
manageBtn(ageEl);
ageEl.addEventListener('input', function(){manageBtn(ageEl);});
function manageBtn(el){
var age = ageEl.value;
if(age < 18){
document.getElementById('age').style.borderColor='#e52213';
document.getElementById("Btn").disabled = true;
}
else{
document.getElementById('age').style.borderColor='';
document.getElementById("Btn").disabled = false;
}
}
<input type="number" id="age">
<button id ="Btn">My Button</button>
Disabling button until condition is met (javascript)
you need to get the button element first by using document.querySelector
let btn = document.querySelector('button')
You can read about querySelector here.
now when you selected the element you need to make sure that you're using == in your if condition instead of =
== is for comparing value
= is for assigning value
Difference between = and ==
now you're code should look like this and it should disabled the button.
let cash = 0;
if (cash == 1) {
btn.disabled = false;
} else {
btn.disabled = true;
}
You can check this codepen
The way to disable button using provider
You forgot to use notify listeners in your CLS class
class CLS with ChangeNotifier {
bool _pressed = false;
bool detect() {
return _pressed;
}
void pressed() {
_pressed = true;
notifyListeners();
}
}
You should also remove listen:false
from your onPressed
provider listener to be able to react to the changes
ElevatedButton(
onPressed: Provider.of<CLS>(context).detect()
? null
: () => context.read<CLS>().pressed(),
stop/disable button after x amount of clicks
You want to disable the button so there is an attribute in HTML, we can use that.
The thing is, you should keep the value of i == 0 instead of 1.
if(i == 5){
$("#addbutton").attr('disabled','disabled');
}
This is how you can add a disabled attribute. Hope this would help you.
Related Topics
Urlsession.Shared.Datataskpublisher Not Working on iOS 13.3
Cllocationcoordinate2D Can't Be Instantiated
How to Create Dictionary That Can Hold Anything in Key? or All the Possible Type It Capable to Hold
What's the Difference Between Aranchor and Anchorentity
Swift: Print Decimal Precision of Division
In Xcode 6.1. 'Uiimage' Does Not Have a Member Named 'Size' Error
How to Stop Timer in Text View
How to Convert Timeinterval into Minutes, Seconds and Milliseconds in Swift
How to Make the Scroll of a Tableview Inside Scrollview Behave Naturally
Multiple Type Constraints in Swift
How to Create Custom Notifications in Swift 3
Programmatically Navigate to New View in Swiftui
In Swift, How to Convert a String to an Enum
What Versions of Swift Are Supported by What Versions of Xcode
What Does the Swiftui '@State' Keyword Do
How to Convert a Uiimage to a Cvpixelbuffer
Should Conditional Compilation Be Used to Cope With Difference in Cgfloat on Different Architectures