1

これは私のhtmlコードです

<div class="wrapper"> <strong> Number of images:</strong>
<div class="formText">
    <input type="radio" name="rdNumber" value="100" />100
    <input type="radio" name="rdNumber" value="200" />200
    <input type="radio" name="rdNumber" value="300" />300
    <input type="radio" name="rdNumber" value="other" />other
</div>
</div>

<div  class="wrapper"> <strong><span>*</span> Image to be displayed:</strong>
                <div class="formText">
                <input type="radio" name="rdImage" value="uploadImage" /> Upload your own image
                <input style="margin-left:10px;" type="file" name="user_upload_image" class="uploader" id="file">
                <br />
                <input type="radio" name="rdImage" value="preExisting"/> Choose from images below
                <div class="100 imgDisp">
                    <div class="heading">
                        10x10 = 100
                    </div>
                    </div>

                    <div class="200 imgDisp">
                    <div class="heading">
                        10x20 = 200
                    </div>
                    </div>

                    <div class="200 imgDisp">
                    <div class="heading">
                        20x10 = 200
                    </div>
                    </div>

                    <div class="300 imgDisp">
                    <div class="heading">
                        10x30 = 300
                    </div>
                    </div>

                    <div class="300 imgDisp">
                    <div class="heading">
                        30x10 = 300
                    </div>
                    </div>

これはjqueryコードです

$(document).ready(function() {
$("div.imgDisp").hide();
$('.' + $(":radio:checked").val()).show();
    $('input[name="rdNumber"]:radio').click(function() {
     $("div.imgDisp").fadeOut('slow');
    $('.' + $(this).val()).fadeIn('slow');
});
});

var rdImage = $('input:radio[name="rdImage"]');
var rdNumbers= $('input:radio[name="rdNumber"]');
rdNumbers.change(function(e){
var $target = $(e.target);
if($target.is(':checked')){
    if($target.is('[value="other"]')){
        rdImage.not('[value="uploadImage"]').prop('disabled', true);
        rdNumberPages.filter('[value="uploadImage"]').prop('checked', true);
    } else {
        rdNumberPages.not('[value="uploadImage"]').prop('disabled', false);
    }
}
});

jqueryコードの目的は、1.「100」、「200」、「300」の選択時に「10x10 = 100」、「10x20 = 200」、「20x10 = 200」など（適切なものは何でも）を表示することです（つまり、rdNumber ラジオ) 値を一致させます..今までは正常に動作しています

  1. ここで、「その他の」ラジオの選択時に「下の画像から選択」ラジオを無効にして再度有効にする機能を追加しようとしました。無効化に成功しました..つまり、「その他の」ラジオを選択すると、「下の画像から選択してください」ラジオが無効になりますが、300、200、または 100 を選択すると、再度有効になりません..この場合はヘルプが必要です..

  2. また、ユーザーが「その他」を選択すると「下の画像から選択」が無効になり、ユーザーが 100、200、300 ラジオを選択すると「下の画像から選択」が有効になりますが、「画像から選択」が自動選択されるようにするにはどうすればよいですか。 below」ラジオ ボタンを使用し、上記の 1 に従って非表示の div を表示する必要があります。つまり、ユーザーが 100 を選択すると、自動的に「Choose from images below」が選択され、該当する div が表示されます。つまり、「10x10 = 100」と表示されますが、これは実現できません。自分の画像」ラジオまたは「下の画像から選択」

ここにフィドルがあります http://jsfiddle.net/xeMjC/1/

4

1 に答える 1

1

すぐに目立った問題がいくつかありました。まず、});java スクリプト (ページの上部で開かれます) の下部に がありませんでした。

次に、変数 'rdNumberPages' がどこにも宣言されていないため、一部のコードが機能しません。

コードにいくつかの小さな変更を加えました。ここで確認できます

于 2013-03-07T06:51:07.300 に答える