無線選択で無効にする選択/ドロップダウンを有効にする

Question

私は非常にJQueryを新しくしています。私は初心者として考えてください。私はラジオボタンを持っているPHPフォームを持っています。どのラジオが選択されているかに基づいて、選択/ドロップダウンを無効にしたいと考えています。以下はシナリオです：

ラジオボタン：毎日およびその他 選択：神の名前

ユーザーがその他はその後、（神名）を選択して選択した場合に無効とその逆する必要があります。

私はすでに自分のページにJQueryをインポートしています。

header.phpの

!-- JQuery 1.12.3 JS --> 
<script src="../js/jquery-1.12.3.min.js"></script> 

HTMLコード

<tr> 
<td class="col-md-4"><label class="control-label">Pooja Type</label></td> 
<td class="col-md-8" align="center"> 
<label class='radio-inline'><input type='radio' name='poojaType' value='daily' checked>Daily</label> 
<label class='radio-inline'><input type='radio' name='poojaType' value='misc'>Misc</label> 
</td> 
</tr> 
<tr> 
<td class="col-md-4"><label class="control-label" for="deity">Deity Name</label></td> 
<td class="col-md-8"><select class="form-control" name="deityName"> 

してくださいアドバイス。以下は

Answer 1

以下のように属性 disabled値に対してそれを設定することができます

コードに従う：

は、あなたが以下のように2つのラジオボタンがあるとします。以下のように

<input type='radio' name='radios' id='rdbDaily' value='Daily' />&nbsp;Daily 
<input type='radio' name='radios' id='rdbMisc' value='Misc' />&nbsp;Misc 

と1つのドロップダウン：

<select id='selectordropdown'> 
    <option>Deity Name</option> 
</select> 

あなたはラジオボタンを選択して、ドロップダウンを有効または無効にするためにjqueryの下に使用することができます。

$('input:radio[name="radios"]').change(function() { 
    if ($(this).val()=='Daily') { 
     $('#selectordropdown').attr('disabled', false); 
    } 
    else if ($(this).val()=='Misc') { 
     $('#selectordropdown').attr('disabled', true); 
    } 
}); 

また、以下のjqueryを使用してドロップダウンを有効/無効にすることもできます：

$("#rdbDaily").click(function() { 
    $("#selectordropdown").attr("disabled", false); 
}); 

$("#rdbMisc").click(function() { 
    $("#selectordropdown").attr("disabled", true); 
}); 

これが役立つと確信しています。

おかげ

Answer 2

のjQueryのコードです：

<script> 
$(':radio[name=poojaType]').change(function() { 
var prop = this.value == 'misc'; 
$('select[name=deityName]').prop({ disabled: prop, required: !prop }); 
}); 
</script> 

Answer 3

あなただけradio buttonのchange eventにchecked valueを取得し、

$('input[name="poojaType"]').on('change', function() { 
 
    $('select[name="deityName"]').attr('disabled', this.value != "daily") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td class="col-md-4"> 
 
    <label class="control-label">Pooja Type</label> 
 
    </td> 
 
    <td class="col-md-8" align="center"> 
 
    <label class='radio-inline'> 
 
     <input type='radio' name='poojaType' value='daily' checked/>Daily</label> 
 
    <label class='radio-inline'> 
 
     <input type='radio' name='poojaType' value='misc' />Misc</label> 
 
    <select name="deityName"> 
 
     <option>Value 1</option> 
 
     <option>Value 2</option> 
 
     <option>Value 3</option> 
 
     <option>Value 4</option> 
 
    </select> 
 
    </td> 
 
</tr>