-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から値が選択されているかどうかを確認します。
  • まだボタンを無効にしていない場合。
  • それ以外の場合、ドロップダウンから値が選択されているため、ボタンを有効にする必要があります。

これに関するどんな助けもありがたいです。

ドロップダウンをポピュレートする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 
<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 に答える
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 に答える