[英]Problems using jQuery toggle class and attr
我有一个按钮,我想根据某种条件使用jQuery来切换类“ disabled”和属性disabled = "disabled"
,但事实并非如此。 另外,Attr和prop之间的区别是什么。 我期望的是:
if ($("#result").text() == 'Deve inserir no minimo 2 caractéres para válidação..' || $( "#result" ).text() == 'Este código já foi inserido tente outro') {
// then add the class disabled in the button
// and add the attr disabled in the button
} else {
// then remove the class disabled
// and remove the attr disabled
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#codAssembleia').keyup(function() { var codAssembleia = $('#codAssembleia').val(); if (codAssembleia.length > 2) { $.ajax({ url: "<?php echo base_url();?>forms_de_preenchimento/Preenchimento_Controller/verificarCodAssembleia", method: "POST", data: { codAssembleia: codAssembleia }, success: function(data) { //alert("Changed!"); $('#result').html(data); } }); } else { //alert("Not Changed!"); $('#result').html('<small class="text-secundary">Deve inserir no minimo 2 caractéres para válidação..</small>'); } }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('#codAssembleia').keyup(function() { if ($("#result").text() == 'Deve inserir no minimo 2 caractéres para válidação..' || $("#result").text() == 'Este código já foi inserido tente outro') { $("#submit").attr("disabled", "disabled"); $("#submit").addClass("disabled"); } else { $("#submit").removeAttr("disabled"); $("#submit").removeClass("disabled"); } }); }); </script> <div class="modal-footer"> <button type="submit" id="submit" class="btn btn-success disabled" disabled="disabled" value="save">Submeter <i class="fas fa-paper-plane"></i></button> </div> <div class="form-group"> <label for="exampleInputEmail1">Código Da Assembleia</label> <input type="text" class="form-control integerInput" id="codAssembleia" name="codAssembleia" placeholder="Introduza o código da assembleia de votos .." required> <p id="result"></p> </div>
你有没有尝试使用
if ($("#result").text() == 'Deve inserir no minimo 2 caractéres para válidação..' || $("#result").text() == 'Este código já foi inserido tente outro') {
$("#submit").prop("disabled", true); //here is a change in your code
$("#submit").addClass("disabled");
} else {
$("#submit").prop("disabled", false); //here is a change in your code
$("#submit").removeClass("disabled");
}
这是我认为您正在尝试做的一个简单示例,并且运行良好。
<body>
<div>
<input id="inp" type="text" />
<p id="result"></p>
<button id="submit">
submit
</button>
</div>
<script>
$(document).ready(function() {
$("#inp").keyup(() => {
const result = $("#result");
if ($("#inp").val().length > 2) {
result.text("we do something");
} else {
result.text("enter something");
}
});
});
</script>
<script>
$(document).ready(function() {
$("#inp").keyup(() => {
const submit = $("#submit");
if ($("#result").text() == "enter something") {
submit.prop("disabled", true);
} else {
submit.prop("disabled", false);
}
});
});
</script>
</body>
您是否检查过api是否返回正确的数据?
我只是想出了另一种方法来解决此问题。.与其使用2个不同的脚本并购买具有相同功能键的脚本,我只是将2个脚本合为一体。 而且有效。 我认为一个脚本正在干扰另一个脚本键控功能。
这是我解决问题的代码:
<script type="text/javascript">
$(document).ready(function(){
$('#codAssembleia').keyup(function(){
var codAssembleia = $('#codAssembleia').val();
if(codAssembleia.length > 2) {
$.ajax({
url:"<?php echo base_url();?>forms_de_preenchimento/Preenchimento_Controller/verificarCodAssembleia",
method:"POST",
data:{codAssembleia : codAssembleia},
success:function(data)
{
//alert("Changed!");
$('#result').html(data);
if($("#codState").val() == 0)
{
$("#submit").prop("disabled", true);
$("#submit").addClass("disabled");
}
if($("#codState").val() == 1)
{
$("#submit").prop("disabled", false);
$("#submit").removeClass("disabled");
}
}
});
}
else
{
//alert("Not Changed!");
$('#result').html('<small class="text-secundary">Deve inserir no minimo 2 caractéres para válidação..</small><input type="hidden" name="codState" id="codState" value="0">');
$("#submit").addClass("disabled");
$("#submit").prop("disabled", true);
}
});
});
</script>
我还使用了一个隐藏字段$(“#codState”)来存储从数据请求ajax出来的值1和0。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.