Add and remove required JQuery

Question

Add and remove required JQuery

Navigation

#1 by (0 votes)

1

I have a radio button question:

<div class="row">
    <div class="col-lg-1">
        <div class="radio">
            <label>
                <input type="radio" name="dirar" value="1">
                Sim
            </label>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="radio">
            <label>
                <input type="radio" name="dirar" value="0">
                Não
            </label>
        </div>
    </div>
    // Validação de erro caso não tenha selecionado uma opção msg = "Campo Obrigatório"
    <div class="col-lg-3">
        <label id="dirar-error" class="input-error" for="dirar" style="border: none; color: red;"></label>
    </div>
</div>

If name="dirar" is selected '0' = não , I need a validation that adds required="required" to another question that is below:

<div class="row">
    <div class="col-lg-1">
        <div class="radio">
            <label>
                <input type="radio" name="isubrar" value="1">
                Sim
            </label>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="radio">
            <label>
                <input type="radio" name="isubrar" value="0">
                Não
            </label>
        </div>
    </div>
</div>

In short, if name="dirar" is '0' = Não the second radio button name="isubrar" becomes a required field or if name="dirar" is '1' = Sim name="isubrar" will not be a required field.

javascript jquery

asked by anonymous 22.03.2017 / 15:45

1 answer

How do I add decimal places in a counter? My app does not run on android Lollipop

score 0 · Accepted Answer

A functional implementation follows:

$(":radio[name='dirar']").change(function(){
  if($(this).val() === "0") {
    $(":radio[name='isubrar']").attr("required", "required");
  } else {
    $(":radio[name='isubrar']").removeAttr("required");
  }
  
  console.log($(":radio[name='isubrar']").attr("required"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
    <div class="col-lg-1">
        <div class="radio">
            <label>
                <input type="radio" name="dirar" value="1">
                Sim
            </label>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="radio">
            <label>
                <input type="radio" name="dirar" value="0">
                Não
            </label>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-1">
        <div class="radio">
            <label>
                <input type="radio" name="isubrar" value="1">
                Sim
            </label>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="radio">
            <label>
                <input type="radio" name="isubrar" value="0">
                Não
            </label>
        </div>
    </div>
</div>