CODEWITHSUNDEEP
javascriptjquery
TheProgrammer
TheProgrammer

Reputation: 1489

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

<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.

Upvotes: 0

Views: 456

Answers (3)

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 2

Prasanna Venkatesh
Prasanna Venkatesh

Reputation: 402

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.

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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.

Upvotes: 0

Related Questions