Как преобразовать кнопку «Отключить отправку» из jQuery в alpinejs?

Я хочу знать, как я могу преобразовать кнопку «Отключить отправку» из jQuery в alpine js?

Код :

<form>
  <input type = "text" class = "input-field" placeholder = "Enter you name *" value = "" />
  <button type = "submit" class = "submit-btn">Submit</button>
</form>

$(document).ready(function(){
    $('.submit-btn').attr('disabled',true);
    $('.input-field').keyup(function(){
        if ($(this).val().length !=0)
            $('.submit-btn').attr('disabled', false);            
        else
            $('.submit-btn').attr('disabled',true);
    })
});

Есть ошибки? В консоли?

— 17.12.2020 14:04

javascript jquery laravel alpine.js

17.12.2020 14:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 215

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используя x-bind или его более короткий синтаксис, :

<script src = "//cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>

<form x-data = "{ name: ''}">
  <input type = "text" x-model = "name" placeholder = "Enter you name *" />
  <button type = "submit" :disabled = "!name.length">Submit</button>
</form>

в моем случае вместо x-bind я использую : . если я использую x-bind для первого представления, только кнопка не отключается, независимо от того, какое первое значение инициализации истинно или ложно.

— 03.11.2021 04:07

17.12.2020 14:10

Ответ принят как подходящий

это точно для того, что вы хотите?

<div x-data = "{disableSubmit: true, inputText: null}">
   <input x-model = "inputText" x-on:input = "[(inputText.length != 0) ? disableSubmit = false : disableSubmit = true]">
   <button x-bind:disabled = "disableSubmit">submit</button>
</div>

попробуйте это на jsfiddle

Вы всегда можете использовать короткую руку вот так: <button :disabled='someCondition'></button>

— 10.03.2022 15:55

17.12.2020 14:28