### [Usando la API de JavaScript para campos de solo lectura](https://wpforms.com/developers/using-the-javascript-api-for-read-only-fields/) **Publicado:** 22 de septiembre de 2025 **Autor:** Umair Majeed **Contenido:** ¿Te gustaría controlar los campos de solo lectura en WPForms usando JavaScript? WPForms proporciona un conjunto de métodos de JavaScript que te permiten bloquear, desbloquear y alternar campos del formulario directamente en el frontend. Estas funciones son útiles si deseas agregar lógica personalizada, como deshabilitar campos después del envío o hacer que ciertos campos sean de solo lectura según las acciones del usuario. ## Agregando tu JavaScript personalizado Para usar estos métodos, necesitarás agregar un fragmento de JavaScript personalizado a tu sitio. Si no estás seguro de cómo agregar código personalizado, consulta nuestra guía sobre [cómo agregar JavaScript personalizado para WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). Asegúrate de que tu código se ejecute después de que WPForms se haya cargado, envolviéndolo dentro del evento `wpformsReady`. ### Métodos disponibles Los siguientes métodos están disponibles dentro del objeto `wpforms.field`. ### `wpforms.field.lock( formId, fieldId )` Bloquea un campo específico para que los usuarios puedan verlo pero no editarlo. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.lock(123, 5); }); ``` ### `wpforms.field.unlock( formId, fieldId )` Elimina el estado de solo lectura de un campo específico. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.unlock(123, 5); }); ``` ### `wpforms.field.toggle( formId, fieldId, state )` Alterna el estado de solo lectura de un campo. - true — bloquea el campo - false — desbloquea el campo - ‘auto’ (predeterminado) — cambia automáticamente según el estado actual ``` // Con estado explícito wpforms.field.toggle(123, 5, true); // Con comportamiento predeterminado ('auto') wpforms.field.toggle(123, 5); ``` ### `wpforms.field.isLocked( formId, fieldId )` Comprueba si un campo está actualmente bloqueado. Devuelve un booleano. ``` jQuery(document).on('wpformsReady', function() { if ( wpforms.field.isLocked(123, 5) ) { console.log('El campo está bloqueado'); } }); ``` ### `wpforms.field.lockAll( formId )` Bloquea todos los campos de un formulario. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.lockAll(123); }); ``` ### `wpforms.field.unlockAll( formId )` Desbloquea todos los campos de un formulario. ``` jQuery(document).on('wpformsReady', function() { wpforms.field.unlockAll(123); }); ``` ### `wpforms.field.readOnlyClass` Devuelve el nombre de la clase CSS que se aplica cuando un campo es de solo lectura. ``` console.log( wpforms.field.readOnlyClass ); // 'wpforms-field-readonly' ``` ## Notas - Reemplaza `123` con el ID de tu formulario y `5` con el ID del campo que deseas dirigir. - Usa siempre el evento `wpformsReady` para asegurarte de que los métodos estén disponibles. - Estos métodos solo funcionan en el frontend; no afectan al constructor de formularios ni a las entradas guardadas. **Categorías:** Tutoriales, Campos ---