💡 jQuery Snippet: Enable Button on “Yes” Confirmation

 

When designing forms that require user confirmation (like agreeing to terms or confirming intent), it’s a common practice to disable the Submit or Insert button until a certain condition is met — such as the user selecting "Yes".

Here’s a handy jQuery example and a breakdown of how it works:

---

✅ What This Script Does

This jQuery snippet ensures that a button (with ID InsertButton) remains disabled until the user selects a specific radio button (#pawb_confirm_1, which represents "Yes"):

javascript


$(document).ready(function() {
  $('#InsertButton').prop('disabled', true);

  $('#pawb_confirm_0, #pawb_confirm_1').change(setButton);

  function setButton() {
    let yes = $('#pawb_confirm_1').prop('checked');
    $('#InsertButton').prop('disabled', !yes);
  }
});

---

🔍 Line-by-Line Breakdown

js
$(document).ready(function() {

Ensures the DOM is fully loaded before executing any script.

js
  $('#InsertButton').prop('disabled', true);

Disables the Insert button by default on page load.

js
  $('#pawb_confirm_0, #pawb_confirm_1').change(setButton);

Adds a change event listener to both radio buttons (assumed to be "No" and "Yes" options).

js
  function setButton() {
    let yes = $('#pawb_confirm_1').prop('checked');
    $('#InsertButton').prop('disabled', !yes);
  }

Checks if the "Yes" radio button is selected.
If yes → enables the button.
If not → keeps it disabled.

---

🧠 Why .prop()?

The jQuery .prop() method is used here to get and set DOM element properties (like checked and disabled), which are dynamic and change based on user interaction.

Common .prop() Examples:

jQuery Code	Description
$('#agree').prop('checked')	Gets if a checkbox is checked
$('#button').prop('disabled', true)	Disables a button
$('#option').prop('selected', true)	Selects a dropdown option

Use .prop() when working with:

• checked

• disabled

• selected

• readonly

🆚 Compared to .attr(), which is used for:

• href

• src

• title

• data-* attributes

---

🎯 Real-World Use Case

Imagine a form where users must confirm an action before proceeding:

html
<label><input type="radio" id="pawb_confirm_0" name="confirm"> No</label>
<label><input type="radio" id="pawb_confirm_1" name="confirm"> Yes</label>
<button id="InsertButton">Insert</button>

With the script above:

• The Insert button is disabled at first.

• Only selecting "Yes" enables the button.