0

選択ボックスから選択が行われるまで無効にする必要があるリンクがあります

<select id="shippingSelect" onchange="simpleCart.update();">
                    <option value="nothing" selected="selected">Choose Shipping Location</option>
                    <option value="uk">UK - FREE</option>
                    <option value="world">Rest of World + £2.00</option>
                </select>

<a href="javascript:;" class="simpleCart_checkout"> Place Order </a>

顧客が配送先を選択するまで注文リンクを無効にするにはどうすればよいですか?

これは私が現時点で持っているものです：

<script>
    $('#shippingSelect').change(function() {
       if ($(this).val() != "nothing") {

          $('.place_order').slideDown();
       } else {
          $('.place_order').slideUp();

       }
    });
    </script>

これは機能しますが、クリックできないだけで常にリンクが表示されるようにしたいと思います。ありがとう

4

2 に答える 2

5

リンクハンドラーで、何か別のものnothingが選択されているかどうかを確認できます

 $('a.simpleCart_checkout').click(function(e) {
     if ($('#shippingSelect').val() == 'nothing') {
        e.preventDefault(); // disable link navigation
     }        
     // your logic for the case that something is selected
 });

いずれにせよ、リンクが無効になっていることを示す灰色のフォントなどの視覚的な表示を追加し、コンボ ボックスで有効な要素が選択されたときにそれを削除する方がよいでしょう。

リンクのスタイルを考慮した別のアプローチ

HTML

<a href="javascript:;" class="simpleCart_checkout disabled"> Place Order </a>

CSS

.disabled
{ 
    color: #AAA
}

JS 

$('#shippingSelect').change(function() {
   if ($(this).val() == "nothing") {
      $('a.simpleCart_checkout').addClass('disabled');
   } 
   else {
      $('a.simpleCart_checkout').removeClass('disabled');
   }
});

$('a.simpleCart_checkout').click(function(e) {
    if ($(this).hasClass('disabled')) {
       e.preventDefault(); // disable link navigation
    }        
    // your logic for the case that something is selected
});

デモ 2 番目のアプローチ

于 2012-09-04T12:28:38.280 に答える
2

このスクリプトを使用して、ボタンを無効/有効にすることができます

<script>
    $('#shippingSelect').change(function() {
       if ($(this).val() != "nothing") {

          $('.place_order').removeAttr("disabled");
       } else {
          $('.place_order').attr("disabled", "disabled");

       }
    });
    </script>
于 2012-09-04T12:28:52.117 に答える