1

ラジオボタンを選択したら、無効にするか非表示にします。これは、ラジオボタンが価格にリンクされており、ラジオボタンをオンにすると価格が表示されるため、ユーザーが価格を比較できないようにするためです。選択したラジオボタンをリンクして価格を表示するためにknockout.jsを使用しています。そして、jqueryで選択されていないラジオボタンを非表示にする方法を見つけましたが、2つをマージするのに問題があります。

以下のコードを参照してください。

<div class="stepTwo">
    <div class="middleTitle">
        <p>
        </p>
    </div>
    <div data-bind="with: bin2ViewModel">
        <div class="divRadiobtns" data-bind="foreach: availableGroups">
            <input type="radio" id="makeOpacityHide" class="radioOptions" name="retailerGroup"
                data-bind="checked: $parent.selectedGroupOption, value: retailerproductId" /><span
                    class="radioOptionsA" data-bind="css: { 'radioOptionsA-checked': $parent.selectedGroupOption()==retailerproductId() }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <div data-bind="with: selectedRetailerGroup">
            <span class="actualPrice" data-bind="text: price" />
        </div>
        <div data-bind="with: selectedRetailerGroup">
            <input type="hidden" name="retailerProductId" id="retailerProductId" class="retailerProductId"
                data-bind="value: retailerproductId" />
        </div>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
    //jquery
    $(document).ready(function () {
        $("input[name$='retailerGroup']").click(function () {
            var test = $(this).val();

            $("input.radioOptionsA").hide();

        });
    });


    //knockout
    var Bin2ViewModel = function () {
        var self = this;
        this.selectedRetailerGroup = ko.observable();
        this.selectedGroupOption = ko.observable();
        this.selectedGroupOption.subscribe(function (newVal) {
            var items = $.grep(self.availableGroups(), function (item) { return item.retailerproductId() == newVal; });
            self.selectedRetailerGroup(items[0]);
        });
        this.selectedGroup = ko.observable();
        this.availableGroups = ko.observableArray(
            [new RetailerViewModel("21290", "£1.80"),
                new RetailerViewModel("302852", "£2.55"),
                new RetailerViewModel("422974", "£2.55")
            ]);
    };


    var RetailerViewModel = function (retailerproductId, price) {
        this.retailerproductId = ko.observable(retailerproductId);
        this.price = ko.observable(price);
    };
    ko.applyBindings({ bin2ViewModel: ko.observable(new Bin2ViewModel()) });
//]]>
</script>

誰かがそれらを一緒に動作させる方法を知っていますか、またはノックアウトでラジオボタンを隠す良い方法がありますか？

http://jsfiddle.net/afnguyen/MMqzv/3/

また、jsfiddleにjqueryを添付しました。これは、選択したラジオボタンのクラス名が変更されたときに必要なものを示しているため、非表示にしないでください。

http://jsfiddle.net/afnguyen/5mmt2/1/

ありがとう

4

2 に答える 2

1

純粋なKncokoutソリューションが必要な場合は、enableバインディングを使用して同じ効果を得ることができます。

したがって、ボタンが選択されていないときにボタンを有効にします。これにより、次のバインディングが変換されます。

data-bind="enable: !$parent.selectedGroupOption()"

したがって、コードを含む完全なサンプルは次のとおりです。

<input type="radio" id="makeOpacityHide" 
       class="radioOptions" name="retailerGroup"
       data-bind="checked: $parent.selectedGroupOption, 
                  value: retailerproductId, 
                  enable: !$parent.selectedGroupOption()" />

デモJSFiddle。

于 2013-02-04T16:19:43.910 に答える
0

これを試して。cssattrib"disabled"を="disabled"に変更できます。

    $(".class").attr(
        'disabled', 'disabled'
    );
于 2013-02-04T15:44:20.803 に答える