1

次のような jquery モバイル ソリューションに複数の選択ダイアログがあるとします。

     <select name="fruitFilter" id=fruitFilter" multiple="multiple" data-native-menu="false">
          <option>Fruit choice</option>
          <option value="1">Choice1</option>
          <option value="2">Choice2</option>
          <option value="3">Choice3</option>
          <option value="4">Choice4</option>
          <option value="1234">All Fruits</option>
        </select>

選択肢 1 ～ 4 を個別に選択できるようにしたいのですが、[すべての果物] をオンにした場合、すべての選択をマークし (正しく無効にする)、チェックを外します。[すべての果物] の選択を解除すると、選択肢 1 ～ 4 を選択できるようになりますまた。

今のところ、すべて/個別に無効/有効にするこの機能を除いて、すべての作業とローカルストレージへのロード/保存があります

誰でもこれをどのように作成できるか考えていますか?

4

1 に答える 1

0

たぶん、こういうこと？

var selAllValue = "1234",
    $fruitSelect = $('#fruitFilter'),
    $allOptions = $fruitSelect.children(), //get all options
    $selAllOption = $allOptions.filter('[value="' + selAllValue + '"]'); //Get the check all option

$fruitSelect.on('change', function () {
    var $this     = $(this),
        currSel   = ($this.val() || []).pop(), //get the last selected value.
        $options  = $allOptions, 
        flg       = (currSel === selAllValue);

    if (flg) { //if it is equal to alloption
       $options = $options.not($selAllOption).prop('selected', false); //unselect others and set $options to the new list
    }

    $options.prop('disabled', flg); //finally set the disable flag on $options. i.e disable flag will be set if current selection is alloption else just not disable all.

    $this.selectmenu('refresh'); //refresh select menu to take effect.

});

デモ

于 2013-11-13T20:51:12.037 に答える