If I select a checkbox, I deactivate another

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • WIPE
    New Member
    • Oct 2021
    • 4

    If I select a checkbox, I deactivate another

    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:


    Code:
    Code 1
    Base PHP code I'm using.
    
    <!-- IVF fertilization -->
    <div class='col-sm-4'>
        <?=_('IVF fertilization')?>
        <div>
            <input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1' 
                <?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
            > 
            <label for="yesFe" class='smallLabel'><?=_('Yes')?></label> 
        </div>
    
        <div>
            <input type="radio" id="noFe" name="niptData_ivfFertilization" value='0' 
                <?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
            > 
            <label for="noFe" class='smallLabel'><?=_('No')?></label> 
        </div>
    </div>
    
    <!-- if IVF ovum -->
    <div class='col-sm-4'>
        <?=_('If IVF ovum')?>
        <div>
            <input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation="" 
                <?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
            > 
            <label for="ownOv" class='smallLabel'><?=_('Own')?></label> 
        </div>
    
        <div>
            <input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation="" 
                <?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
            > 
            <label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label> 
        </div>
        <br>
    </div>
    
    
    
    CODE 2
    Script that working to solve the problem.
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    						<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $('#new_user_form *').filter(':radio').change(function() {
                if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
                    $('#new_user_form *').filter(':radio').each(function(){
                        if(this.id=='noFe' && this.value=='0') {
                        } else {
                            $(this).attr("checked",false);
                        }
                    });
                }
                if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
                    var checkedId = this.id;
                    var checkedOrNot = $(this).is(':checked');
                    $('#new_user_form *').filter(':radio').each(function(){
                        if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
                            if(checkedOrNot) {
                                $(this).attr("disabled",true);
                            } else {
                                $(this).attr("disabled",false);
                            }
                        }
                    });
    </script>
    
    
    
    CODE 3
    HTML code that was asked of me.
    
    
    <div class="col-sm-4">
                    Pregnancy<span class="required">*</span>
                    <div class="has-error">
                    <input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);"> 
                    <label for="yesFe" class="smallLabel">Yes</label> 
                    <span class="help-block form-error">Required field</span></div>
    
                    <div class="has-success">
                    <input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style=""> 
                    <label for="noFe" class="smallLabel">No</label> 
                    </div>
                </div>
    
    
    <div class="col-sm-4">
                    if FIVET, ovum<span class="optional"></span>
                    <div>
                    <input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation=""> 
                    <label for="ownOv" class="smallLabel">Own</label> 
                    </div>
    
                    <div>
                    <input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation=""> 
                    <label for="fromADonor" class="smallLabel"> 
    As a donor</label> 
                    </div>
                    <br>
                </div>
  • dev7060
    Recognized Expert Contributor
    • Mar 2017
    • 656

    #2
    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
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <form>
        <h3> IVF fertilization </h3>
        <input type="radio" name="fertilization" id="radio_1">yes <br>
        <input type="radio" name="fertilization" id="radio_2">no <br>
        <h3> if IVF ovum </h3>
        <input type="radio" name="ovum" class="group1" disabled>Own <br>
        <input type="radio" name="ovum" class="group1" disabled>From a donor <br>
    </form>
    JS
    Code:
    $(function() {
        $("#radio_1").click(yes);
        $("#radio_2").click(no);
    
    });
    
    function yes() {
        if (this.checked) {
            $("input.group1").removeAttr("disabled");
        }
    }
    
    function no() {
        if (this.checked) {
            $("input.group1").attr("disabled", true);
            $("input.group1").attr("checked", false);
        }
    }

    Comment

    • locoge
      New Member
      • Dec 2021
      • 1

      #3
      If I select a checkbox Thank s link

      Comment

      Working...