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

描述：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供选择器，它仅当它与该选择器匹配时才检索下一个兄弟。

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

＆＃13;

$(".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"));
});

＆＃13;

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

＆＃13;

Answer 2

这可能是您正在寻找的内容：http://www.w3schools.com/jsref/prop_option_value.asp

Answer 3

这是一个简单的答案：

    <script src="https://code.jquery.com/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>

Answer 4

这是你的html（改变了一些小事）：

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

以下是您需要的工作资料：

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

工作演示： http://jsfiddle.net/6mtwumce/6/

Answer 5

您可以查看ExecutionContext的值并使用select删除.removeAttr()。

disabled

jsfiddle

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

5 个答案: