如何将禁用提交按钮从 jQuery 转换为 alpinejs?
How to Convert Disable submit button from jQuery to 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);
})
});
使用 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>
这是否符合您的要求?
<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
上试试这个
我想知道如何将禁用提交按钮从 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);
})
});
使用 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>
这是否符合您的要求?
<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
上试试这个