-1

如果未选择特定下拉列表中的值，我正在尝试禁用提交按钮。下拉菜单和按钮的代码如下所示：

    <li>
    <select name="names" id="names">
    <option value="">Constituency</option>
    <!-- populates the drop down with names -->
    <?php foreach ($cons as $constituency): ?>
    <option value="<?php htmlout($constituency['ids']); ?>">
    <?php htmlout($constituency['names']); ?>
    </option>
    <?php endforeach; ?>
    <?php if (isset($selectError)): ?>
    <p><?php htmlout($selectError); ?></p>
    <?php endif; ?>
    </select>
    </li>

    <li><input type="hidden" name="action" value="search"></li>
    <li><input type="submit" value="SEARCH" class="button search" id="jsbutton" disabled="disabled"></li>

所以下拉列表的 id 为 'names' ，按钮的 id 为 'jsbutton' 并设置为 'disabled' 。

然后，我尝试使用以下 JQuery 来定位它，但无论如何该按钮仍处于禁用状态：

    $(document).ready(function() {

    if ($('#names').val() = '')
    {
        $('#jsbutton').attr('disabled', 'disabled');  
    }
    else
    {
        $('#jsbutton').removeAttr('disabled');
    }
    });

所以我想做的是：

  • 检查是否从 dropdpwn 中选择了值。
  • 如果还没有，则禁用按钮。
  • ELSE 已从下拉列表中选择了一个值，因此应启用该按钮。

对此的任何帮助表示赞赏。

PHP 填充下拉列表：

          try
      {
        $cons_result = $pdo->query("SELECT id, name 
                               FROM constituency 
                               ORDER BY name");
      }
      catch (PDOException $e)
      {
        $error = 'Error fetching constituencies from database!' . $e->getMessage();
        include 'error.html.php';
        exit();
      }


      foreach ($cons_result as $rows)
      {
        $cons[] = array('ids' => $rows['id'], 'names' => $rows['name']);
      }

      include 'searchform.html.php';
    }
4

6 回答 6

4

你可以试试这个

HTML

<select id="names">
    <option value=0>Please Select</option>
    <?php ($cons as $constituency) {...} ?>
</select>
<input id="jsbutton" type="submit" disabled />

JS

$(function(){
    $('#names').change(function(e) {
        if ($(this).prop("selectedIndex") === 0)
        {
            $('#jsbutton').prop('disabled', true);  
        }
        else
        {
            $('#jsbutton').prop('disabled', false);
        }
    });
});

演示。

于 2012-09-28T10:14:41.440 回答
1 
$(document).ready(function() {
     $("#names").change(function () {
          var str = "";
          if ($("#names option:selected").val()=='')
            {

                $('#jsbutton').attr('disabled', 'disabled');  
            }
            else
            {

                $('#jsbutton').removeAttr('disabled');
            }
        });
});
于 2012-09-28T11:22:39.673 回答
0

您需要检查change选择框的事件，因此当值更改时，您再次检查是否选择了某些内容，然后更改您的按钮！

还要注意声明==中的if

$(document).ready(function() {
    $('#names').change(function() {
        if ($('#names').val() == '')
        {
            $('#jsbutton').attr('disabled', 'disabled');  
        }
        else
        {
            $('#jsbutton').removeAttr('disabled');
        }
    }
});
于 2012-09-28T10:00:18.173 回答
0 
<li>
<select name="names" id="names" onChange='editButton(this.value);'>
<option value="">Constituency</option>
<!-- populates the drop down with names -->
<?php foreach ($cons as $constituency): ?>
<option value="<?php htmlout($constituency['ids']); ?>">
<?php htmlout($constituency['names']); ?>
</option>
<?php endforeach; ?>
<?php if (isset($selectError)): ?>
<p><?php htmlout($selectError); ?></p>
<?php endif; ?>
</select>
</li>

<li><input type="hidden" name="action" value="search"></li>
<li><input type="submit" value="SEARCH" class="button search" id="jsbutton" disabled="disabled"></li>

<script type='text/javascript'>
function editButton(value){
if (value == '')
    {
        $('#jsbutton').attr('disabled', 'disabled');  
    }
    else
    {
        $('#jsbutton').removeAttr('disabled');
    }
}
</script>

每次更改下拉列表中的值时都会调用 editButton 函数。因此，如果值为 null，它将禁用按钮。

于 2012-09-28T10:10:27.993 回答
0

采用

$('#names').val() =='' instead of $('#names').val() = ''
于 2012-09-28T10:11:21.347 回答
0 
        <li>
            <select name="names" id="names"> <!-- if it's not selected then disabled the submit button right? -->
            <option value="">Constituency</option>
            <!-- populates the drop down with names -->
            <?php foreach ($cons as $constituency): ?>
            <option value="<?php htmlout($constituency['ids']); ?>">
            <?php htmlout($constituency['names']); ?>
            </option>
            <?php endforeach; ?>
            <?php if (isset($selectError)): ?>
            <p><?php htmlout($selectError); ?></p>
            <?php endif; ?>
            </select>
            </li>

            <li><input type="hidden" name="action" value="search"></li>

    <!-- then below is what you need to modify, add "onchange" and disabled -->

        <li><input type="submit" value="SEARCH" class="button search" id="jsbutton" onchange="submitDisOrUndisabled();" disabled></li>

    <!-- and add function below -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
        function submitDisOrUndisabled()
        {
            if($('#names').val() != 0) {
                $('#jsbutton').prop('disabled', false);
            }else{$('#jsbutton').prop('disabled', true);}

        }
 </script>   
    <!-- I've tried it and it works very well -->
于 2016-08-02T01:29:47.970 回答