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”。

我不知道我的语法有什么不对。

Answer 1

尝试使用 prop() 而不是 attr() 。并使用布尔类型而不是 string 更改值。并且不要忘记添加 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

执行jquery

时可以观察到<select>和id="emailVisible中没有disabled属性

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

这是因为它删除了此属性以启用选择框。这就是为什么当您访问 $('#emailVisible').attr('disabled') 它是 undefined 因为没有这样的属性。您可以在此选择框上使用 inspect element 来验证自己。

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>

只需将 attr 更改为 prop，因为禁用是属性。

Jquery .attr() 将值设置为未定义，为什么？

Jquery .attr() sets value as undefined, why?

javascript

jquery