jqueryでドロップダウンアイテムが選択されるまでボタンを無効にする

ドロップダウンでアイテムが選択されているときに、送信ボタンを有効にしようとしています。ここにコードがあります。ユーザーがドロップダウンから2つのボタンを有効にする必要がある場合は、2つのボタンがあります。それ以外の場合は、項目がドロップダウンから選択されるまで、消えなければなりません。任意のjqueryプラグインを追加する必要があるかどうかjqueryでドロップダウンアイテムが選択されるまでボタンを無効にする

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script> 
    <script type="text/javascript"> 


$(document).ready(function() { 


    $(".nextbutton").attr("disabled", true); 
    $(".nextbutton1").attr("disabled", true); 
    $('.dropdown').change(function() { 
     if ($('.dropdown').val() == 0) { 
        $(".nextbutton").attr("disabled", true); 
       $(".nextbutton1").attr("disabled", true); 
     } else { 
        $(".nextbutton").attr("disabled", false); 
       $(".nextbutton1").attr("disabled", false); 
     } 
    }); 
});</script> 
</head> 

    <body> 
<form id="phonetypeform"> 
     <select name="porting-p1" class="dropdown"> 
<option value="" class="disablenext">Please select an option...</option> 
<option value="1" class="enablenext">I want to keep my current phone number</option> 
<option value="2" class="enablenext">I want to choose a new number</option> 
     </select> 

</form> 
<button class="nextbutton1">sd Step</button> 
<button class="nextbutton">Next Step</button>

出典

2017-03-11 user6582683

です次回もまた開発者コンソールを開いてください。おそらく多くのエラーが表示されますので、これを試してみてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 

 
$(document).ready(function() { 
 

 
    $(".nextbutton").prop('disabled',true); 
 
    $(".nextbutton1").prop('disabled',true); 
 
    $('.dropdown').change(function() { 
 
     if ($('.dropdown').val() == 0) { 
 
      $(".nextbutton").prop('disabled',true); 
 
      $(".nextbutton1").prop('disabled',true); 
 
     } else { 
 
      $(".nextbutton").prop('disabled',false); 
 
      $(".nextbutton1").prop('disabled',false); 
 
     } 
 
    }); 
 

 
});</script> 
 
</head> 
 

 
    <body> 
 
<form id="phonetypeform"> 
 
     <select name="porting-p1" class="dropdown"> 
 
<option value="" class="disablenext">Please select an option...</option> 
 
<option value="1" class="enablenext">1</option> 
 
<option value="2" class="enablenext">2</option> 
 
     </select> 
 

 
</form> 
 
<button class="nextbutton1">sd Step</button> 
 
<button class="nextbutton">Next Step</button>

出典

2017-03-11 04:20:34 Mosd

私は上記のスニペットがうまくいきます。私は同じコードを貼り付けてコピー..それは働いていません.. – user6582683

編集、それはjqueryから取得できませんでした：//code.jquery.com/jquery-1.11.3.min.js....i https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.jsを変更してStackOverflowからテストしたところ、もう一度やり直してください – Mosd

jqueryのUIを使用していますか？そうでなければ、button（）は何もしません。シンプルなATTRをお試しください：

$(document).ready(function() { 
    $('.nextbutton').attr('disabled', 'disabled'); 
    $('.nextbutton1').attr('disabled', 'disabled'); 
    $('.dropdown').change(function() { 
     if ($('.dropdown').val() == 0) { 
      $('.nextbutton').attr('disabled', 'disabled'); 
      $('.nextbutton1').attr('disabled', 'disabled'); 
     } else { 
      $('.nextbutton').removeAttr('disabled'); 
      $('.nextbutton1').removeAttr('disabled'); 
     } 
    }); 

});

出典

2017-03-11 04:01:11 Pejka

...その動作していない – user6582683

jqueryのUIはjQueryのを拡張したものです：[リンク]（https://jqueryui.com/）しかし、それはここでは必須ではありません、私は尋ねました。 disabled属性を追加/削除するには、それぞれボタンのattr（ 'disabled'、 'disabled'）またはremoveAttr（ 'disabled'）を呼び出します。 – Pejka

私のために働いていないあなたのコードを試しました.. – user6582683

ではなく、これにあなたのjavascriptを変更

：

$(document).ready(function() { 


    $(".nextbutton").attr("disabled", true); 
    $(".nextbutton1").attr("disabled", true); 
    $('.dropdown').change(function() { 
     if ($('.dropdown').val() == 0) { 
        $(".nextbutton").attr("disabled", true); 
       $(".nextbutton1").attr("disabled", true); 
     } else { 
        $(".nextbutton").attr("disabled", false); 
       $(".nextbutton1").attr("disabled", false); 
     } 
    }); 
});

無効には、私はちょうどそのままあなたのコードを取り、それを実行しているとき、私はエラーを取得する参照属性

出典

2017-03-11 04:06:23

私のために働いていない..私はコードを変更しました.. – user6582683

私のために働くhttps://jsfiddle.net/28j31zt8/ –

多分あなたのあなたの体に向かってください –

コードはスニペットで正常に動作しています。実際のコードに複数のドロップダウンがあるとします。セレクタを一意に変更し、$(this)を値に使用します。

$(document).ready(function() { 
 

 

 
    $(".nextbutton").attr("disabled", true); 
 
    $(".nextbutton1").attr("disabled", true); 
 
    $('.dropdown[name=porting-p1]').change(function() { 
 
     if ($(this).val() == 0) { 
 
        $(".nextbutton").attr("disabled", true); 
 
       $(".nextbutton1").attr("disabled", true); 
 
     } else { 
 
        $(".nextbutton").attr("disabled", false); 
 
       $(".nextbutton1").attr("disabled", false); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="phonetypeform"> 
 
     <select name="porting-p1" class="dropdown"> 
 
<option value="" class="disablenext">Please select an option...</option> 
 
<option value="1" class="enablenext">I want to keep my current phone number</option> 
 
<option value="2" class="enablenext">I want to choose a new number</option> 
 
     </select> 
 

 
</form> 
 
<button class="nextbutton1">sd Step</button> 
 
<button class="nextbutton">Next Step</button>

出典

2017-03-11 04:26:59 aje

あなたのソリューションは、実際に働いています。 GoogleのCDNからjquery 1.12.4を使用するように変更するだけです。

それ以外は、デフォルトで両方のボタンにdisabled属性を追加することで、ページの読み込み時に両方のボタンを無効にすることができます。これにより、ボタンが初めてレンダリングされるときに無効になることが確認されます。また、両方のボタンで同じクラス名を指定すると、無効または有効にするコード行を呼び出すだけで済みます。各ボタンの一意の識別子が必要な場合は、各ボタンのIDとしてnextbutton1とnextbutton2を入力します。最後に、フォームへの変更イベントをチェックする代わりに、ドロップダウンを直接聞くことができます。したがって、ドロップダウンで変更が発生した場合にのみトリガされます。私が使用する必要があるUI

<head>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#dropdownNumber').change(function() { 
       if ($(this).val() == 0) { 
        $(".nextbutton").attr("disabled", true); 
       } else { 
        $(".nextbutton").attr("disabled", false); 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <form id="phonetypeform"> 
     <select name="porting-p1" class="dropdown" id="dropdownNumber"> 
      <option value="" class="disablenext">Please select an option...</option> 
      <option value="1" class="enablenext">I want to keep my current phone number</option> 
      <option value="2" class="enablenext">I want to choose a new number</option> 
     </select> 
    </form> 

    <button class="nextbutton" id="nextbutton1" disabled>sd Step</button> 
    <button class="nextbutton" id="nextbutton2" disabled>Next Step</button> 
</body>

出典

2017-03-11 11:04:49 muhihsan

jqueryでドロップダウンアイテムが選択されるまでボタンを無効にする

答えて

関連する問題