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

【问题标题】：Jquery .attr() sets value as undefined, why?Jquery .attr() 将值设置为未定义，为什么？
【发布时间】：2017-08-19 10:15:12
【问题描述】：

<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'));"打印未定义在控制台中。

“2”每秒打印一次。

我不知道我的语法有什么错误。

【问题讨论】：

为什么投反对票？如果您投反对票，请说明原因...
Multiple select not updating when value changed through javascript/jquery的可能重复

标签： javascript jquery

【解决方案1】：

尝试使用 prop() 而不是 attr() 。并且使用布尔类型而不是 string 更改值。并且不要忘记添加 3 个输入

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>

【讨论】：

宾果游戏。谢谢^^就是这样

【解决方案2】：

执行jquery时可以观察到<select>和id="emailVisible中不会有disabled属性

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

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

【讨论】：

【解决方案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，因为 disable 是一个属性。

【讨论】：