Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / use :enable and :disable selectors via jquery
Ask Question

Use :enable and :disable selectors via jQuery

Ethan Karla 377 28 Jul 2021

How to use :enable and :disable selectors via jQuery?

jquery jquery
Updated 26 Nov 2023
Ethan Karla
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Message

1 Answers

Aryan Kumar
Aryan Kumar 26 Nov 2023
Report Abuse

In jQuery, you can use the prop() method to enable or disable form elements. Here's an example that shows how to use the prop() method to enable and disable a button based on the value of a checkbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enable/Disable Selectors via jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<form>
  <label for="enableCheckbox">Enable/Disable Button</label>
  <input type="checkbox" id="enableCheckbox">

  <button id="myButton" type="button">Click Me!</button>
</form>

<script>
  $(document).ready(function() {
    // Initially, disable the button
    $('#myButton').prop('disabled', true);

    // Change the button state based on the checkbox
    $('#enableCheckbox').on('change', function() {
      // If the checkbox is checked, enable the button; otherwise, disable it
      $('#myButton').prop('disabled', !this.checked);
    });
  });
</script>

</body>
</html>

In this example:

  • The button (#myButton) is initially disabled using $('#myButton').prop('disabled', true);.
  • The state of the button is changed based on the checkbox (#enableCheckbox) using the change event. If the checkbox is checked, the button is enabled; otherwise, it is disabled.

You can adapt this example to your specific use case by adjusting the selectors and the conditions for enabling or disabling elements based on your application's requirements.

advertising