javascript - 选择 HTML 选择选项时启用按钮，反之亦然

Question

我正在尝试做某事。我在 while 循环中有这个:

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

我需要的是，只有选择了带有值2的选项，而反之亦然!我想我需要使用类似 $('select').on('change', function() 的东西，但我不知道如何获取选项的值。
我正在尝试:

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

但这行不通。感谢您的帮助，谢谢!

Answer 1

尝试使用 .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.com/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>