1

私のサイトには、複数のチェックボックス、2 つのラジオ ボタン、およびテキスト フィールドを含むデータ入力フォームがあります。ラジオ ボタンの 1 つが選択されている場合、テキスト フィールドを編集不可にしたいと考えています。顧客が入力しようとすると、エラー メッセージが表示されます。私は Jquery と Web コーディングが初めてなので、関連する回答を見つけるのに苦労しています。

ラジオボタンとテキストエリアは以下の通り

    <form method="post" class="required-form" action="php/addcompanyengine.php">
  <ul class="forms">


    <p class="Region">Please select the type of listing you desire</p>
    <ol>
        <li><label class="checkbox">Bronze Listing</label>
        <input type="radio" name="listing[]" id="listing" value="Bronze" checked></li>
        </ol>
        <ol>
        <li><label class="checkbox">Silver Listing</label>
        <input type="radio" name="listing[]" id="listing" value="Silver"></li>
    </ol>



      <label for="Description">Description:<br /><br />
            (Silver listings only <br /> <br />
            Maximum 400 characters)</label>
            <textarea name="Description" cols="20" id="Description" maxlength="400" ></textarea>

基本的に、顧客がラジオ ボタンをブロンズ (デフォルト) のままにした場合、テキスト フィールドを使用できないようにし、シルバーを選択した場合は入力できるようにしたいと考えています。

どうもありがとうございました。

4

3 に答える 3

0

すでにjQueryがロードされていると仮定します（IDではなくクラス属性に注意してください）。

<ol>
    <li><label class="checkbox">Bronze Listing</label>
    <input type="radio" name="listing[]" class="listing" value="Bronze" checked></li>
    </ol>
    <ol>
    <li><label class="checkbox">Silver Listing</label>
    <input type="radio" name="listing[]" class="listing" value="Silver"></li>
</ol>

<script type="text/javascript">
    $(document).ready(function() {
        $('.listing').change({
            if ($(this).val() == 'Bronze') {
                $('#Description').attr('readonly','readonly');
            } else {
                $('#Description').removeAttr('readonly');
            }
        });
    });
</script>

ここで実際の動作を確認できます：http：//jsfiddle.net/AZ7wJ/

textareaを元々編集できないようにする場合は、readonly="readonly"属性を追加できます。

于 2012-09-19T14:09:04.220 に答える
0

始める前に：

  • 無線inputID が異なるように変更します。
  • readonlyに属性を追加しますtextarea。

listingBronzeBronze ラジオとして使用していると仮定しましょうinput id。

//we listen to the change event
$("#listingBronze").change(function(event){
    //we tell readonly is equal to bronze checked status
    $('#Description').prop('readonly',(!!$(this).prop("checked")));
});

このシンプル。readonly = checkedコードが本当に小さくなるので。

注：使用!! not not 値であるため、値がブール値になることを保証します。

必要に応じて、プロセスで属性を破棄して、テキストエリアhideを作成できます。showreadonly

$("#listingBronze").change(function(event){
    $('#Description').show();
    if(!!$(this).prop("checked")) $('#Description').hide();
});

変更ごとにテキストエリアを表示し、checked属性をチェックして true の場合は非表示にします。

于 2012-09-19T14:17:55.713 に答える
0

受け入れられた答えは

<script type="text/javascript">
    $(document).ready(function() {
        $('.listing').change(function() {
            if ($(this).val() == 'Bronze') {
                $('#Description').attr('readonly','readonly');
            } else {
                $('#Description').removeAttr('readonly');
            }
        });
    });
</script>

変更後の function() に注意してください

于 2014-08-22T10:08:35.570 に答える