4

Chromeで問題が発生しましたが、それがChromeのバグなのか、jQueryのバグなのか、コードのエラーなのかわかりません。Chromiumで未解決の問題を検索しましたが、何も見つかりませんでした。同様にjQueryでも見つかりませんでした。ここでJSFiddleを作成しました（後世のために以下のコードを含めます）：http： //jsfiddle.net/trmackenzie/cvPhd/4/

予想：ラジオボタンをクリックすると、オプションリストで示された値が選択されます。また、リスト内の特定のオプションをクリックすると、すべてのラジオボタンの選択が解除されます。

実際（Chrome 21 for WindowsおよびMacの場合）：ラジオボタンを初めてクリックしたときに最後に必要なオプションのみが選択され、その後クリックしても何も起こりません。リスト内の特定のオプションを選択すると、ラジオボタンが選択されたままになります。

実際（IE7、8、9およびFirefoxの場合）：予想される動作と同じです。たとえば、正しい動作です。

オプションの「選択済み」属性は正しく設定されていますが、Chromeはその状態の表示を停止していることに注意してください。

jsFiddleでも利用できるコードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head><title>Testing</title></head>
<body>
    <select size="10" name="testList" multiple="multiple" id="testList_box" style="width:250px; float:left; margin-right:20px;">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
        <option value="5">Fifth</option>
    </select>
    <span id="columnSpecList">
        <input type="radio" id="input1" name="spec" value="1" />
            <label for="input1">Testing</label>
        <input type="radio" id="input2" name="spec" value="1,2" />
            <label for="input2">Testing</label>
        <input type="radio" id="input3" name="spec" value="1,2,3" />
            <label for="input3">Testing</label>
    </span>
</body>
</html>​

jQuery：

$(document).ready(function () {
var columnList = $('#testList_box');
var columnSpecList = $('#columnSpecList');
var columnSpecOptions = $('input', columnSpecList);

    $(columnSpecOptions).click(function () {
        var optionsToSelect = $(this).val().split(',');

        // clear the list
        $(':selected', columnList).removeProp('selected');

        // select desired columns
        $(optionsToSelect).each(function (index, value) {
            $('[value=' + value + ']', columnList).prop('selected', 'true');
        });
    });

    $(columnList).on(
        {
            click: deselectSpec,
            change: deselectSpec
        }
    );

    // simulate "click" of the selected option to load the initial values
    var itemToClick = $(":checked", columnSpecList);
    $(itemToClick).click();

    function deselectSpec() {
        $(columnSpecOptions).removeProp('checked');
    }
});​

バグに遭遇したことがありますか、または（より可能性が高いですが）どこかで実装に微妙な点が欠けていますか？

4

2 に答える 2

10

.removeProp() を使用しないでください!! プロパティを二度と使用しない予定がない限り。ブール値を使用してそれらを設定します ex

.prop('checked',true or false)

jQueryドキュメントから.removeProp

注: このメソッドを使用して、checked、disabled、または selected などのネイティブ プロパティを削除しないでください。これにより、プロパティが完全に削除されます。一度削除すると、要素に再度追加することはできません。.prop() を使用して、代わりにこれらのプロパティを false に設定してください。

持っていた

// clear the list
$(':selected', columnList).removeProp('selected');

 // select desired columns
 $(optionsToSelect).each(function (index, value) {
       $('[value=' + value + ']', columnList).prop('selected', 'true');
 });

に変更します

$(':selected', columnList).prop('selected',false);

 // select desired columns
 $(optionsToSelect).each(function (index, value) {
      $('[value=' + value + ']', columnList).prop('selected', true);
  });

そしてあなたは持っていた

function deselectSpec() {
    $(columnSpecOptions).removeProp('checked');
}

に変更します

function deselectSpec() {
     $(columnSpecOptions).prop('checked',false);
}

http://jsfiddle.net/cvPhd/7/

于 2012-08-30T19:14:16.603 に答える
0

removeProp() および prop() の代わりに attr() および removeAttr() メソッドを使用したところ、すべて正常に動作しました。

$(document).ready(function () {
        var columnList = $('#testList_box');
        var columnSpecList = $('#columnSpecList');
        var columnSpecOptions = $('input', columnSpecList);

        $(columnSpecOptions).click(function () {
            var optionsToSelect = $(this).val().split(',');

            // clear the list
            $(columnList).find('option').removeAttr('selected');

            // select desired columns
            $(optionsToSelect).each(function (index, value) {
                $('[value=' + value + ']', columnList).attr('selected', 'selected');
            });
        });

        $(columnList).on(
            {
                click: deselectSpec,
                change: deselectSpec
            }
        );

        // simulate "click" of the selected option to load the initial values
        var itemToClick = $(":checked", columnSpecList);
        $(itemToClick).click();

        function deselectSpec() {
            $(columnSpecOptions).removeProp('checked');
        }
    });​

編集：コードを修正

于 2012-08-30T19:15:58.177 に答える