Директива wire:bind:disabled

Директива wire:bind:disabled вешается на HTML-элемент и связывает его атрибут disabled с указанным булевым свойством компонента Livewire. В значение передаётся имя публичного свойства. При изменении свойства компонента атрибут disabled элемента автоматически обновляется.

Синтаксис

<input type="text" wire:bind:disabled="propertyName">

Пример

Сделаем поле ввода, которое будет заблокировано, если свойство $isDisabled равно true:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class InputComponent extends Component
	{
		public $isDisabled = true;
		
		public function toggleDisabled()
		{
			$this->isDisabled = !$this->isDisabled;
		}
		
		public function render()
		{
			return view('livewire.input-component');
		}
	}
?>

<div>
	<input type="text" wire:bind:disabled="isDisabled" placeholder="This input is disabled">
	<button wire:click="toggleDisabled">Toggle Disabled</button>
</div>

Результат выполнения кода:

<div>
	<input type="text" disabled placeholder="This input is disabled">
	<button>Toggle Disabled</button>
</div>

Пример

Заблокируем кнопку отправки формы, пока не будет введён текст в поле:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class FormComponent extends Component
	{
		public $text = '';
		public $isButtonDisabled = true;
		
		public function updatedText()
		{
			$this->isButtonDisabled = empty($this->text);
		}
		
		public function submit()
		{
			session()->flash('message', 'Form submitted!');
		}
		
		public function render()
		{
			return view('livewire.form-component');
		}
	}
?>

<div>
	<input type="text" wire:model.live="text" placeholder="Enter text">
	<button wire:bind:disabled="isButtonDisabled" wire:click="submit">Submit</button>
</div>

Результат выполнения кода при пустом поле:

<div>
	<input type="text" placeholder="Enter text">
	<button disabled>Submit</button>
</div>

Смотрите также

директиву wire:bind,
которая связывает любой атрибут со свойством компонента
директиву wire:bind.class,
которая динамически управляет CSS-классами
директиву wire:bind.style,
которая динамически управляет CSS-стилями
директиву wire:model,
которая связывает поле ввода со свойством компонента