I'm trying to do something. I have this in a while loop:

<tr>
<th>Order status</th>
<td>
<form class='update-status'>
<select name='status_id'class='status'>
<option selected='selected'>Order received</option>
<option value='2'>Processing</option>
</select>
<button type='submit' title='Click to update the status of this order' disabled>Update order status</button>
</form>
</td>
</tr>

What I need is that the button gets enabled only if the option with value 2 is selected and vice-versa! I think I need to use something like $('select').on('change', function() but I don't know how to get the value of the option.
I'm trying with:

$('.status').change(function()
{
    if ($('select option:selected').val() === 2)
    {
        $(this).closest('tr').find( 'button' ).prop("enabled", true);
    }
});

But this is not working. I apreciate any help, thanks!

I'm trying to do something. I have this in a while loop:

<tr>
<th>Order status</th>
<td>
<form class='update-status'>
<select name='status_id'class='status'>
<option selected='selected'>Order received</option>
<option value='2'>Processing</option>
</select>
<button type='submit' title='Click to update the status of this order' disabled>Update order status</button>
</form>
</td>
</tr>

What I need is that the button gets enabled only if the option with value 2 is selected and vice-versa! I think I need to use something like $('select').on('change', function() but I don't know how to get the value of the option.
I'm trying with:

$('.status').change(function()
{
    if ($('select option:selected').val() === 2)
    {
        $(this).closest('tr').find( 'button' ).prop("enabled", true);
    }
});

But this is not working. I apreciate any help, thanks!

• javascript
• jquery

• Can you be more specific what do you have in the while loop and if possible share the JavaScript that you have as well – Chavdar Slavov Commented Apr 23, 2015 at 22:51
• @ChavdarSlavov The only javascript that I think can help me is that I entered in question, my other attempts failed. The while loop displays all the orders present in the table in my database. – Dyan Commented Apr 23, 2015 at 22:54
• I'm not seeing the loop and you shouldn't use closest('tr') because the button and select are both in the same level and you can use .siblings() instead – ismnoiet Commented Apr 23, 2015 at 23:23

5 Answers 5

Try utilizing .next()

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

$(".status").change(function() {
  var button = $(this).next("button");
  if (this.value == "2") {
    button.prop("disabled", false);
  } else {
    button.prop("disabled", true)
  } 
});

$(".status").change(function(e) {
  e.preventDefault();
  e.stopPropagation();
  var button = $(this).next("button");
  if (this.value == "2") {
    button.prop("disabled", false);       
  } else {
    button.prop("disabled", true)
  };
  console.log(button.prop("disabled"));
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Order status</th>
      <td>
        <form class='update-status'>
          <select name='status_id' class='status'>
            <option selected='selected'>Order received</option>
            <option value='2'>Processing</option>
          </select>
          <button title='Click to update the status of this order' disabled>Update order status</button>
        </form>
      </td>
    </tr>
  </tbody>
</table>

You can check value of select and use .removeAttr() to remove disabled.

$('select').on('change', function() {
    if($(this).val() == "2") {
        $('#sub_btn').removeAttr('disabled');
    } 
});

jsfiddle

This might be what you're looking for: http://www.w3schools./jsref/prop_option_value.asp

Here is your html(changed minor things):

<form class='update-status'>
<select id='status_id'>
<option value='1' selected='selected'>Order received</option>
<option value='2'>Processing</option>
</select>
<button type='submit' id='btn' title='Click to update the status of this order' disabled>Update order status</button>
</form>

Here is the working js of what you need:

$( document ).ready(function() {
    $('select').on('change', function() {
       if(this.value == 1)
           $('#btn').attr("disabled", true);
        else
           $('#btn').attr("disabled", false);
    });
});

Working demo: http://jsfiddle/6mtwumce/6/

Here is a simple answer :

    <script src="https://code.jquery./jquery-2.1.3.min.js"></script>
    <form class='update-status'>
<select name='status_id' id="select">
<option selected='selected'>Order received</option>
<option value='2'>Processing</option>
<option value='3'>Something else</option>
</select>
<button type='submit' title='Click to update the status of this order' id="button" disabled>Update order status</button>
</form>

<script>
    $(document).ready(function(){
        $('#select').change(function(){
            var value = $(this).val();

            if(value == 2){

                $('#button').removeAttr('disabled');

            }else{
                $('#button').prop("disabled", true );
            }

        });
    });
</script>