jQuery проверяет текст, только если выбраны определенные переключатели

Question

Мне нужно, чтобы текст поля требовался ТОЛЬКО, если выбраны определенные переключатели: в этом случае, только если выбраны значения "Resp. Inscripto", "Iva Exento" или "Monotributo" (любые из них). Если кто-то выбирает "Финал Consumidor", то ввод текста не требуется.

Я использую этот код, но он не работает.

Что я делаю неправильно?

    <script type="text/javascript">

    $(function(){

        $('#form1').validate({

  rules: {
    contrato_cuit: { 
     required: '#contrato_cuittipo[value="Resp. Inscripto"]:checked'
    },
    contrato_cuit: { 
     required: '#contrato_cuittipo[value="IVA Exento"]:checked'
    },
    contrato_cuit: { 
     required: '#contrato_cuittipo[value="Monotributo"]:checked'
    }
  }         

        });
    })
</script>

<form name="form1" id="form1" method="post" action="xxxx.php" encType="multipart/form-data" >

CUIT
<input type="text" value='' name="contrato_cuit" id="contrato_cuit">

Resp. Inscripto
<input name="contrato_cuittipo" id="contrato_cuittipo_r" type="radio" value="Resp. Inscripto" required checked="checked" />

Monotributo
<input name="contrato_cuittipo" id="contrato_cuittipo_m" type="radio" value="Monotributo" required /> 

IVA Exento
<input name="contrato_cuittipo" id="contrato_cuittipo_i" type="radio" value="IVA Exento" required /> 

Consumidor Final
<input name="contrato_cuittipo" id="contrato_cuittipo_c" type="radio" value="Consumidor Final" required />

<input type="submit" name="button" id="btnsubmit" value=" ENVIAR "/> 

</form>

Спасибо франциско

Answer 1

Вы можете воспользоваться тем, что JQuery .validate() не будет пытаться проверить отключенный ввод.

Итак, нажмите на radio проверьте, имеет ли это значение Consumidor Final,

Если это так, то просто отключите ввод текста. Включите, если нет.

$(function(){

  $("#form1").validate();
  
  $("#form1 input[type='radio']").on("click",function(){
    if($(this).val()=="Consumidor Final"){
      console.log("Text input disabled");
      $("#contrato_cuit").prop("disabled",true);
    }else{
      console.log("Text input enabled");
      $("#contrato_cuit").prop("disabled",false);
    }
  });
  
});

.error{
  font-size:1.4em;
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>


<form name="form1" id="form1" method="post" action="xxxx.php" encType="multipart/form-data" >

  CUIT
  <input type="text" value='' name="contrato_cuit" id="contrato_cuit" required>

  Resp. Inscripto
  <input name="contrato_cuittipo" id="contrato_cuittipo_r" type="radio" value="Resp. Inscripto" required checked="checked" />

  Monotributo
  <input name="contrato_cuittipo" id="contrato_cuittipo_m" type="radio" value="Monotributo" required /> 

  IVA Exento
  <input name="contrato_cuittipo" id="contrato_cuittipo_i" type="radio" value="IVA Exento" required /> 

  Consumidor Final
  <input name="contrato_cuittipo" id="contrato_cuittipo_c" type="radio" value="Consumidor Final" required />

  <input type="submit" name="button" id="btnsubmit" value=" ENVIAR "/> 

</form>