提问者:小点点

选择下拉值时启用禁用按钮


我有两个按钮:

>

  • 用于批量订单

    对于样品订单

    默认情况下,当我单击下拉菜单时,这两个按钮都被禁用。值“1”,那么“样本订单Btn”应该被启用,当我点击下拉值,那么1“BUK订单”Btn应该被启用。

    再次选择时,两个按钮都应禁用。这是我在select元素上的代码,它不工作,我不知道为什么。

    null

    $("select").on('change',function(){
        if ($(this).find('option:selected').text()=="1"){
            alert('1');
            $("#product-addtocart-button").attr('disabled',true);
            $("#product-addtocart-button1").attr('disabled',false);
        }
      
        if ($(this).find('option:selected').text()!="1" && $(this).find('option:selected').text()!="0"){
            alert('25');
            $("#product-addtocart-button1").attr('disabled',true);
            $("#product-addtocart-button").attr('disabled',false);
        }
    	   
        if ($(this).find('option:selected').text()=="0"){
            alert('sele');
            $("#product-addtocart-button").attr('disabled',true);
            $("#product-addtocart-button1").attr('disabled',true);
        }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="productextra">
        <option selected value="0">select</option>
        <option value="1">1</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="75">75</option>
        <option value="100">100</option>
        <option value="150">150</option>
        <option value="200">200</option>
        <option value="250">250</option>
        <option value="300">300</option>
        <option value="400">400</option>
        <option value="500">500</option>
        <option value="750">750</option>
        <option value="1000">1000</option>
    </select>
    <button type="button" id="product-addtocart-button" class="button btn-cart"  disabled="disabled">
        <span>
            <span>Bulk Order</span>
        </span>
    </button>
    <button type="button" id="product-addtocart-button1" class="button btn-cart select-change" disabled="disabled">
        <span>
            <span>Sample Order</span>
        </span>
    </button>

    null


  • 共2个答案

    匿名用户

    null

    $("select").on('change', function() {
    
      console.log($('option:selected', this).text() == 0)
      console.log($('option:selected', this).val())
      $("#product-addtocart-button").attr('disabled', $('option:selected', this).val() > 1 || $('option:selected', this).val() == 0);
      $("#product-addtocart-button1").attr('disabled', $('option:selected', this).val() == 1 || $('option:selected', this).val() == 0);
    
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="productextra">
      <option selected value="0">select</option>
      <option value="1">1</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="75">75</option>
      <option value="100">100</option>
      <option value="150">150</option>
      <option value="200">200</option>
      <option value="250">250</option>
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="750">750</option>
      <option value="1000">1000</option>
    </select>
    <button type="button" id="product-addtocart-button" class="button btn-cart" disabled="disabled"><span><span>Bulk Order</span></span>
    </button>
    <button type="button" id="product-addtocart-button1" class="button btn-cart select-change" disabled="disabled"><span><span>Sample Order</span></span>
    </button>

    匿名用户

    使用

    $("#product-addtocart-button").attr('disabled','disabled');
    $("#product-addtocart-button1").removeAttr('disabled');
    

    而不是

    $("#product-addtocart-button").attr('disabled',true);
    $("#product-addtocart-button1").attr('disabled',false);