使用jQuery切换类和attr时出现问题
[英]Problems using jQuery toggle class and attr
问题描述
I have a button which I want to toggle the class "disabled" and the attribute disabled = "disabled" using jQuery based on some condition, but it doesn't. 
我有一个按钮，我想根据某种条件使用jQuery来切换类“ disabled”和属性disabled = "disabled" ，但事实并非如此。 Also, what is the diference between Attr and prop. 另外，Attr和prop之间的区别是什么。 What I expect is that : 我期望的是：
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>
3 个解决方案
解决方案1
0 2019-08-25 09:00:44
did you tried to use 你有没有尝试使用
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");
}
解决方案2
0 2019-08-25 19:50:55
this is a simple example of what i think you are trying to do, and it is working fine. 这是我认为您正在尝试做的一个简单示例，并且运行良好。
<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>
did you checked if the api is returning the right data? 您是否检查过api是否返回正确的数据？
解决方案3
0 2019-08-25 22:24:21
I just figure a different way to solve this issue.. Instead of using 2 diferent scripts and bought scripts with the same function keyup i just joined the 2 scripts in one. 我只是想出了另一种方法来解决此问题。.与其使用2个不同的脚本并购买具有相同功能键的脚本，我只是将2个脚本合为一体。 and it worked. 而且有效。 I think that one script was interfiering in the other script keyup function. 我认为一个脚本正在干扰另一个脚本键控功能。
Heres the code that i solved the issue : 这是我解决问题的代码：
<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>
I also used a hidden field $("#codState") to store the values 1 and 0 that come out from the data request ajax. 我还使用了一个隐藏字段$（“＃codState”）来存储从数据请求ajax出来的值1和0。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.