Disable a Button

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 either null or some function onPressed: () {}
  • Instead, conditionally set it using a ternary or a helper function (example below)
  • Check the isButtonDisabled as part of this conditional and return either null 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 a null 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



Leave a reply



Submit