如何将禁用提交按钮从 jQuery 转换为 alpinejs？答案

【问题标题】：How to Convert Disable submit button from jQuery to alpinejs?如何将禁用提交按钮从 jQuery 转换为 alpinejs？
【发布时间】：2021-03-28 04:12:27
【问题描述】：

我想知道如何将禁用提交按钮从 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);
    })
});

【问题讨论】：

有什么错误吗？在控制台中？

标签： javascript jquery laravel alpine.js

【解决方案1】：

使用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 第一个视图，则无论第一个初始化值 true 还是 false，都不会禁用按钮。

【解决方案2】：

这对你想要的准确吗？

<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上试试这个

【讨论】：