0

3 つのチェックボックスがあるページがあり、カスタム jQuery 検証を行う必要があります。以下は、3 つのチェックボックスのコピーです。

私がやりたいのは、ユーザーが最初の2つのチェックボックスの1つだけを選択できるように設定することです(最初のチェックボックスを選択した場合、2番目のチェックボックスを使用できなくなり、その逆も同様です。次に、ユーザーが最初のチェックボックスの1つを選択した場合2 つのボックスの場合、3 番目のチェックボックスを選択できます。

誰でもこれを手伝うことができますか？ 

 <input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1">

 <input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1">

 <input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1">
4

3 に答える 3

0

selectors をキャッシュ.propし、デモンストレーションのために使用するソリューションを作成しました。

$(function() {
    var $options = $('.option');
    var $priority = $('#upselljnpriority');

    function uncheckOtherOptions(domElem) {
        if (domElem.checked) {
            $options.not(domElem).prop('checked', false);
        }
    }

    function togglePriorityAvailability() {
        if ($options.is(':checked')) {
            $priority.prop('disabled', false);
        } else {
            $priority.prop('disabled', true);
            $priority.prop('checked', false);
        }
    }

    $options.click(function () {
        uncheckOtherOptions(this);
        togglePriorityAvailability();
    });

    togglePriorityAvailability();
});

option最初の 2 つのオプションにクラスを追加したことに注意してください。これにより、非常に高速でクリーンなセレクターを作成できます。また、JavaScript を変更することなく、より多くのオプションを使用して HTML コードを拡張できるため、これは良い方法です。これが望ましくない場合は、使用できます

var $options = $('#upselldigitaldisplay, #upsellenhancedclassificationad');

最初にイベント ハンドラーの外側で計算を行ったことに注意してください$options。$priorityこのようにして、後で使用するために計算をキャッシュしました。これにより、パフォーマンスが向上します。

.prop属性を変更するつもりはなく、プロパティのみを変更するつもりなので、プロパティの操作に を使用していることに注意してください。

行に注意してください$options.not(domElem).prop('checked', false);。.not()入力としてDOM要素を使用しました。これは、元のセレクターから特定の DOM 要素を除いたものを意味します。

名前付き関数 (uncheckOtherOptionsおよびtogglePriorityAvailability) を使用していることに注意してください。私は彼らが好き。彼らは、何が起こっているのか、何が起こるべきなのかについてもう少し詳しく説明します。またtogglePriorityAvailability、別の関数を作成することで、それを再利用することができました（ページロード時に最後のチェックボックスを正しい状態に設定する最後の行に注意してください）。

これをテストするためのjsFiddle デモも作成しました。

于 2013-05-29T06:54:41.883 に答える
0

個人的には次のことをお勧めしますが、これには HTML にいくつか変更を加える必要があります (jQuery に従って):

var radios = $('input[type="checkbox"].ap_upsellstandard');
radios.change(function () {
    var self = this,
        $self = $(self);
    if ($self.siblings().length) {
        // one of the first two:
        $self.siblings('input').prop('disabled', self.checked);
        $self.closest('fieldset').next('fieldset').toggle(self.checked);
    }
}).last().parent().hide();

JS フィドルのデモ。

変更された HTML:

<fieldset>
    <legend>Select <strong>one</strong> of the following:</legend>
    <input type="checkbox" name="upselldigitaldisplay" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselldigitaldisplay" value="1" />
    <input type="checkbox" name="upsellenhancedclassificationad" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upsellenhancedclassificationad" value="1" />
</fieldset>
<fieldset>
    <input type="checkbox" name="upselljnpriority" class="ap_upsellstandard ap_webupsellstandard ap_upsell_default_off ap_upsell_allowed_all" id="upselljnpriority" value="1" />
</fieldset>

参考文献:

于 2013-05-29T07:07:05.433 に答える