F
Filament2mo ago
khalil

Dynamic Form Field Disabling with Alpine.js in FilamentPHP

Dynamic Form Field Disabling with Alpine.js in FilamentPHP Hi everyone, I’m working on a project using FilamentPHP and need help with dynamically disabling form fields on the EditRecord page using Alpine.js. I’m trying to add a button to toggle the disabled state for all fields on the page. What I’m Trying to Achieve: On the Edit Record page, I want to include a header action (button) that toggles the disabled state of all form fields dynamically. The fields should become disabled/enabled based on the button's action, and I'm using Alpine.js for this. My Current Setup: I’ve attempted to bind the disabled state using x-bind:disabled via the extraAttributes() method on each form component. The Issue: While Alpine.js works fine for toggling the disabled state on the input components, it only affects the wrapper of the form fields and not the actual input elements themselves. The disabled state seems to apply visually to the wrapper component, but the input fields are not disabled in functionality. What I Need Help With: How can I ensure that the disabled state is correctly applied to the actual input elements themselves, not just the wrapper, when using Alpine.js in Filament? Is there a better way to implement this dynamic disabling using Filament's built-in functionality or any best practices I should follow? Any advice, tips, or pointers would be greatly appreciated! Thanks in advance! 🙏
No description
No description
No description
2 Replies
Lara Zeus
Lara Zeus2mo ago
go other direction... use a toggle and afterStateUpdated disable the fields you want
khalil
khalil2mo ago
Thank you for responding.
Want results from more Discord servers?
Add your server