What is wrong with this If/Else code?

Question

I have a "Change" button that makes a form active or locked when clicked. Though the button only works when I click "change", and then doesn't :/

<div class="holder">
  <div class="question active">Q1<input id="one" type="text">
<div class="button passive"><input type="button" value="Change" id="changeone"></div></div></div>

$('input#changeone').click(function() {
    if( $('#one').attr('readonly', true) ) {

      $("#changeone").attr('value', 'Save');
      $('div.button').parent().css('background-color', 'red');
      $('#one').attr('readonly', false);

    } else {

      $("#changeone").attr('value', 'Change');
      $('div.button').parent().css('background-color', 'green');
      $('#one').attr('readonly', true);

    }

})

THANKS :)

**corrected indentation

THANK YOU ALL! You all responded so quickly and I thank everyone for their time :)

andyb · Accepted Answer · 2011-08-06 18:55:46Z

5

You are setting readonly to true in your if, rather than getting it. You need to use .attr(attributeName) to get the value.

$('input#changeone').click(function() {
    if( $('#one').attr('readonly') == 'readonly') {
        ...
    } else {
        ...
    }
});

edited Aug 6, 2011 at 18:55

answered Aug 6, 2011 at 18:50

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pufAmuf Over a year ago

So should it look like this( $('#one').attr(readonly) = true ) { ?

andyb Over a year ago

It depends, the correct readonly attribute should be set as readonly="readonly" in the markup, so a positive test is attr('readonly') == 'readonly'. However as @Mrchief has pointed out there could be a standalone attribute (not valid XHTML). If you are in control of setting the readonly attribute correctly, then the comparison above will do just fine.

Mrchief · Accepted Answer · 2011-08-06 18:57:19Z

5

Need to check for true like this:

if( $('#one').attr('readonly') == true) )

You can also just have readonly attribute by itself

<input readonly>

In that case, use this:

$('#one').is('[readonly="readonly"]') || $('#one').is('[readonly="true"]')

Combining the two into single statement:

var isReadonly = $('#one').attr("readonly");
if(isReadonly && isReadonly.toLowerCase()!=='false') { 
   // this is readonly
}

edited Aug 6, 2011 at 18:57

answered Aug 6, 2011 at 18:51

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-08-06 18:51:42Z

2

Try this

$('input#changeone').click(function() {
    if( $('#one').attr('readonly')) {

    $("#changeone").attr('value', 'Save');
    $('div.button').parent().css('background-color', 'red');
    $('#one').attr('readonly', false);

} else {

    $("#changeone").attr('value', 'Change');
    $('div.button').parent().css('background-color', 'green');
    $('#one').attr('readonly', true);

}

})

answered Aug 6, 2011 at 18:51

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

genesis · Accepted Answer · 2011-08-06 18:51:55Z

2

try this one

<div class="holder">
  <div class="question active">Q1<input id="one" type="text">
<div class="button passive"><input type="button" value="Change" id="changeone"></div></div></div>

$('input#changeone').click(function() {
    if( $('#one').attr('readonly') == true ) {

    $("#changeone").attr('value', 'Save');
    $('div.button').parent().css('background-color', 'red');
    $('#one').attr('readonly', false);

} else {

    $("#changeone").attr('value', 'Change');
    $('div.button').parent().css('background-color', 'green');
    $('#one').attr('readonly', true);

}

})

answered Aug 6, 2011 at 18:51

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Comments

Emil Ivanov · Accepted Answer · 2011-08-06 18:52:33Z

2

$('#one').attr('readonly', true) sets the readonly attribute to true. You need to read it and compare it with true

if ($('#one').attr('readonly') == true) // ...

answered Aug 6, 2011 at 18:52

Emil Ivanov

37.8k12 gold badges78 silver badges92 bronze badges

Comments

Hyangelo · Accepted Answer · 2011-08-06 18:52:37Z

2

should be

$('input#changeone').click(function() { if( $('#one').attr('readonly') ) {

  $("#changeone").attr('value', 'Save');
  $('div.button').parent().css('background-color', 'red');
  $('#one').attr('readonly', false);

} else {

  $("#changeone").attr('value', 'Change');
  $('div.button').parent().css('background-color', 'green');
  $('#one').attr('readonly', true);

}

})

instead

answered Aug 6, 2011 at 18:52

Hyangelo

4,8224 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

What is wrong with this If/Else code?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related