Question

我正在使用jquery，我想最初禁用我的按钮以防止它提交空值。

这是我的代码

<form method = "get" action = "" >
        <div id="select-vehicle">
         <select class = "form-control">
            <option  selected disabled  > Select Vehicles</option>

        </select>

        </div>
        <button type = "submit" value = "submit" id= "submit">TEST</button>
        </form>

现在是我的jquery

var workers = ["car1", "car2", "car3"];
        for(var i=0; i< workers.length;i++)
    {
    //creates option tag
      jQuery('<option/>', {
            value: workers[i],
            html: workers[i]
            }).appendTo('#select-vehicle select'); //appends to select if parent div has id dropdown
    }
  $('button').click(function(event) {
    var value = $( "select" ).val();
    $('form').attr('action', 'accessories/vehicles/' + value +'/');
  });

谢谢！

Answer 1

这是jQuery代码

$(document).ready(function(){
var workers = ["car1", "car2", "car3"];
        for(var i=0; i< workers.length;i++)
    {
    //creates option tag
      jQuery('<option/>', {
            value: workers[i],
            html: workers[i]
            }).appendTo('#select-vehicle select'); //appends to select if parent div has id dropdown
    }
    
    jQuery('#select-vehicle select').on('change', function(){
    	if(jQuery(this).val() == ''){
        	jQuery('#submit').attr('disabled',true);
        }else{
        	jQuery('#submit').removeAttr('disabled');
        }
    });
    
    if( !jQuery('#select-vehicle select').val() ){
    	jQuery('#submit').attr('disabled',true);
    }else{
    	jQuery('#submit').removeAttr('disabled');
    }
  $('button').click(function(event) {
    var value = $( "select" ).val();
    $('form').attr('action', 'accessories/vehicles/' + value +'/');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method = "get" action = "" >
        <div id="select-vehicle">
         <select class = "form-control">
            <option  selected disabled  > Select Vehicles</option>

        </select>

        </div>
        <button type = "submit" value = "submit" id= "submit">TEST</button>
        </form>

如果任何选项没有值，它也会禁用提交按钮。

Answer 2

您最初可以通过在按钮中添加disabled属性来停用按钮：

<button type = "submit" value = "submit" id= "submit" disabled>TEST</button>

然后，当您更改下拉列表中的选项时，您可以删除disabled属性以启用该按钮：

$(".form-control").change(function() {
    $("#submit").removeAttr("disabled");
});

工作示例：https://jsfiddle.net/fjp3L4yb/1/

Answer 3

回答我的问题

<button type = "submit" value = "submit" id= "submit" disabled>TEST</button> $('select').change(function(){
      if ($(this).val())
      {
        $("button").removeAttr('disabled');
      }
    });

Answer 4

禁用页面加载按钮
使用onchange启用按钮

在提交表单之前检查输入

$(document).ready(function() {

    $('#select-vehicle select').change(function(){
        if ($(this).val()){
            $("#submit").removeAttr('disabled');
        }
    });

    $("form").submit(function(event){
        if (!$('#select-vehicle select').val()) {
            $("#submit").attr('disabled','disabled');
            event.preventDefault();
        }
    });
});

Answer 5

有点晚了，遇到了一些连线问题：

最初按钮被禁用：

<button disabled type = "submit" value = ...

假设当页面加载时，select的选择索引为0

var workers = ["car1", "car2", "car3"];
$('#select-vehicle select')
  .append(
    workers.map(
      worker =>
        jQuery(
          '<option/>'
          ,{
            value: worker,
            html: worker
          }
        )
    )
  )
  .on(
    "change"
    ,e => 
      e.target.selectedIndex===0
      ?$("button").attr("disabled","true")
      :$("button").removeAttr("disabled")
  )
;
$('button').click(function(event) {
  var value = $( '#select-vehicle select' ).val();
  $('form').attr('action', 'accessories/vehicles/' + value +'/');
  //remove this or the form will not be submitted
  event.preventDefault();
  alert($("form").attr("action"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method = "get" action = "" >
      <div id="select-vehicle">
        <select class = "form-control">
          <option  selected disabled  > Select Vehicles</option>
        </select>
      </div>
      <button disabled type = "submit" value = "submit" id= "submit">TEST</button>
    </form>

禁用所选选项时禁用按钮提交

5 个答案: