How to Lock and Unlock Fields Using jQuery in Power Pages

Power Pages allows developers to create highly interactive portal experiences using HTML, CSS, JavaScript, and jQuery. One common requirement is dynamically locking or unlocking fields based on user selections, business logic, or form status.

Using jQuery, developers can easily control whether a field is editable or read-only, providing a better user experience and enforcing business requirements directly on the portal form.

Business Scenario

Suppose a user selects "Approved" in a status field. Once approved, specific fields such as Amount, Description, or Comments should become read-only to prevent further modifications.

Lock a Field Using jQuery

$(document).ready(function () {

   $("#firstname").prop(
      "disabled",
      true
   );

});

This code disables the field and prevents users from editing its value.

Unlock a Field Using jQuery

$(document).ready(function () {

   $("#firstname").prop(
      "disabled",
      false
   );

});

This code makes the field editable again.

Lock or Unlock Based on Dropdown Value

$("#status").change(function () {

   if ($(this).val() == "Approved") {

      $("#comments")
      .prop("disabled", true);

   }
   else {

      $("#comments")
      .prop("disabled", false);

   }

});

The Comments field becomes read-only when the selected status is Approved.

Lock Multiple Fields

$("#firstname")
.prop("disabled", true);

$("#lastname")
.prop("disabled", true);

$("#emailaddress1")
.prop("disabled", true);

Where to Add the Script?

Basic Form Metadata
Web Template
Custom JavaScript Section
Content Snippet
Page Template

Common Use Cases

Approval processes
Read-only review forms
Conditional field editing
User role-based restrictions
Status-based field locking
Portal form validation

Important: Client-side locking improves user experience but should not be considered a security mechanism. Always enforce critical restrictions through Dataverse security roles and server-side validation.

Benefits

Improves data integrity
Enhances user experience
Supports business rules
Reduces accidental changes
Provides dynamic form behavior

Key Takeaways

jQuery can dynamically lock and unlock Power Pages fields.
Use prop('disabled', true) to disable fields.
Use prop('disabled', false) to enable fields.
Ideal for conditional business logic and approval processes.
Combine with Dataverse security for complete control.