jQuery .attr（）将值设置为未定义，为什么？

Question

<div class="form-group">
                    <label>Email Visible (Fill other means of contact to change)</label>
                    <select id="emailVisible" required name="emailVisible" class="form-control" disabled="disabled">
                        <option value="yes" selected = "selected">Yes</option>
                        <option value="no">No</option>
                    </select>
                </div>

setInterval(function(){
            console.log("GOOO");
            if ($("#twitterInput").val() == "" && $("#facebookInput").val() == "" && $("#steamInput").val() == "") {
                console.log("1");
                $("#emailVisible").attr("disabled","disabled");
            } else {
                console.log("2");
                $("#emailVisible").attr("disabled",false);
                console.log($('#emailVisible').attr('disabled'));
            }                   
        }, 1000);

"console.log($('#emailVisible').attr('disabled'));" prints undefined in the console.

"2" is printed every second.

I do not know what is incorrect in my syntax.

Answer 1

Try with prop() instead of attr() .And change the value with boolean type not with string .And dont forget to add 3 input

 setInterval(function() { if ($("#twitterInput").val() == "" && $("#facebookInput").val() == "" && $("#steamInput").val() == "") { console.log("1"); $("#emailVisible").prop("disabled", true); } else { console.log("2"); $("#emailVisible").prop("disabled", false); console.log($('#emailVisible').prop('disabled')); } }, 1000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <input id="twitterInput"> <input id="facebookInput"> <input id="steamInput"> <label>Email Visible (Fill other means of contact to change)</label> <select id="emailVisible" required name="emailVisible" class="form-control" disabled="disabled"> <option value="yes" selected = "selected">Yes</option> <option value="no">No</option> </select> </div> 

Answer 2

You can observe that there will be no disabled attribute in <select> with id="emailVisible when you execute the jquery

 $("#emailVisible").attr("disabled",false);

This is because it removes this attribute to make the selectbox enable. That is why when you access $('#emailVisible').attr('disabled') it is undefined as there is no such attribute. You can verify yourself by using inspect element on this selectbox.

Answer 3

 setInterval(function(){ console.log("GOOO"); if ($("#twitterInput").val() == "" && $("#facebookInput").val() == "" && $("#steamInput").val() == "") { console.log("1"); $("#emailVisible").prop("disabled","disabled"); } else { console.log("2"); $("#emailVisible").prop("disabled",false); console.log($('#emailVisible').prop('disabled')); } }, 1000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label>Email Visible (Fill other means of contact to change)</label> <select id="emailVisible" required name="emailVisible" class="form-control" disabled="disabled"> <option value="yes" selected = "selected">Yes</option> <option value="no">No</option> </select> </div> 

Just change the attr to prop as disable is a property.