471,579 Members | 1,470 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,579 software developers and data experts.

If I select a checkbox, I deactivate another

4
Here's the situation: As you can see in the visual example below. I have four - buttons radio - I need to make an event where when I select the option "NO" of the compo I automatically disable the two selections in the field .

If "YES" is selected, the two other selections must remain active. My problem is because the four stamps are "radio buttons" and not a checkbox.

Visual example:

<-- IVF fertilization -->

⬜ Yes ⬜ No

<-- if IVF ovum -->

⬜ Own ⬜ From a donor

I have this snippet:


Expand|Select|Wrap|Line Numbers
  1. Code 1
  2. Base PHP code I'm using.
  3.  
  4. <!-- IVF fertilization -->
  5. <div class='col-sm-4'>
  6.     <?=_('IVF fertilization')?>
  7.     <div>
  8.         <input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1' 
  9.             <?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
  10.         > 
  11.         <label for="yesFe" class='smallLabel'><?=_('Yes')?></label> 
  12.     </div>
  13.  
  14.     <div>
  15.         <input type="radio" id="noFe" name="niptData_ivfFertilization" value='0' 
  16.             <?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
  17.         > 
  18.         <label for="noFe" class='smallLabel'><?=_('No')?></label> 
  19.     </div>
  20. </div>
  21.  
  22. <!-- if IVF ovum -->
  23. <div class='col-sm-4'>
  24.     <?=_('If IVF ovum')?>
  25.     <div>
  26.         <input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation="" 
  27.             <?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
  28.         > 
  29.         <label for="ownOv" class='smallLabel'><?=_('Own')?></label> 
  30.     </div>
  31.  
  32.     <div>
  33.         <input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation="" 
  34.             <?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
  35.         > 
  36.         <label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label> 
  37.     </div>
  38.     <br>
  39. </div>
  40.  
  41.  
  42.  
  43. CODE 2
  44. Script that working to solve the problem.
  45.  
  46.  
  47. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  48.                         <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  49. <script>
  50.     $(document).ready(function () {
  51.         $('#new_user_form *').filter(':radio').change(function() {
  52.             if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
  53.                 $('#new_user_form *').filter(':radio').each(function(){
  54.                     if(this.id=='noFe' && this.value=='0') {
  55.                     } else {
  56.                         $(this).attr("checked",false);
  57.                     }
  58.                 });
  59.             }
  60.             if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
  61.                 var checkedId = this.id;
  62.                 var checkedOrNot = $(this).is(':checked');
  63.                 $('#new_user_form *').filter(':radio').each(function(){
  64.                     if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
  65.                         if(checkedOrNot) {
  66.                             $(this).attr("disabled",true);
  67.                         } else {
  68.                             $(this).attr("disabled",false);
  69.                         }
  70.                     }
  71.                 });
  72. </script>
  73.  
  74.  
  75.  
  76. CODE 3
  77. HTML code that was asked of me.
  78.  
  79.  
  80. <div class="col-sm-4">
  81.                 Pregnancy<span class="required">*</span>
  82.                 <div class="has-error">
  83.                 <input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);"> 
  84.                 <label for="yesFe" class="smallLabel">Yes</label> 
  85.                 <span class="help-block form-error">Required field</span></div>
  86.  
  87.                 <div class="has-success">
  88.                 <input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style=""> 
  89.                 <label for="noFe" class="smallLabel">No</label> 
  90.                 </div>
  91.             </div>
  92.  
  93.  
  94. <div class="col-sm-4">
  95.                 if FIVET, ovum<span class="optional"></span>
  96.                 <div>
  97.                 <input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation=""> 
  98.                 <label for="ownOv" class="smallLabel">Own</label> 
  99.                 </div>
  100.  
  101.                 <div>
  102.                 <input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation=""> 
  103.                 <label for="fromADonor" class="smallLabel"> 
  104. As a donor</label> 
  105.                 </div>
  106.                 <br>
  107.             </div>
  108.  
Oct 21 '21 #1

✓ answered by dev7060

Here's the situation: As you can see in the visual example below. I have four - buttons radio - I need to make an event where when I select the option "NO" of the compo I automatically disable the two selections in the field .

If "YES" is selected, the two other selections must remain active. My problem is because the four stamps are "radio buttons" and not a checkbox.

Visual example:

<-- IVF fertilization -->

⬜ Yes ⬜ No

<-- if IVF ovum -->

⬜ Own ⬜ From a donor
HTML
Expand|Select|Wrap|Line Numbers
  1. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  2. <form>
  3.     <h3> IVF fertilization </h3>
  4.     <input type="radio" name="fertilization" id="radio_1">yes <br>
  5.     <input type="radio" name="fertilization" id="radio_2">no <br>
  6.     <h3> if IVF ovum </h3>
  7.     <input type="radio" name="ovum" class="group1" disabled>Own <br>
  8.     <input type="radio" name="ovum" class="group1" disabled>From a donor <br>
  9. </form>
JS
Expand|Select|Wrap|Line Numbers
  1. $(function() {
  2.     $("#radio_1").click(yes);
  3.     $("#radio_2").click(no);
  4.  
  5. });
  6.  
  7. function yes() {
  8.     if (this.checked) {
  9.         $("input.group1").removeAttr("disabled");
  10.     }
  11. }
  12.  
  13. function no() {
  14.     if (this.checked) {
  15.         $("input.group1").attr("disabled", true);
  16.         $("input.group1").attr("checked", false);
  17.     }
  18. }

2 30381
dev7060
611 Expert 512MB
Here's the situation: As you can see in the visual example below. I have four - buttons radio - I need to make an event where when I select the option "NO" of the compo I automatically disable the two selections in the field .

If "YES" is selected, the two other selections must remain active. My problem is because the four stamps are "radio buttons" and not a checkbox.

Visual example:

<-- IVF fertilization -->

⬜ Yes ⬜ No

<-- if IVF ovum -->

⬜ Own ⬜ From a donor
HTML
Expand|Select|Wrap|Line Numbers
  1. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  2. <form>
  3.     <h3> IVF fertilization </h3>
  4.     <input type="radio" name="fertilization" id="radio_1">yes <br>
  5.     <input type="radio" name="fertilization" id="radio_2">no <br>
  6.     <h3> if IVF ovum </h3>
  7.     <input type="radio" name="ovum" class="group1" disabled>Own <br>
  8.     <input type="radio" name="ovum" class="group1" disabled>From a donor <br>
  9. </form>
JS
Expand|Select|Wrap|Line Numbers
  1. $(function() {
  2.     $("#radio_1").click(yes);
  3.     $("#radio_2").click(no);
  4.  
  5. });
  6.  
  7. function yes() {
  8.     if (this.checked) {
  9.         $("input.group1").removeAttr("disabled");
  10.     }
  11. }
  12.  
  13. function no() {
  14.     if (this.checked) {
  15.         $("input.group1").attr("disabled", true);
  16.         $("input.group1").attr("checked", false);
  17.     }
  18. }
Oct 22 '21 #2
locoge
1 Bit
If I select a checkbox Thank s link
Dec 6 '21 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by find clausen | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by Vinnie | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.