jQuery仅在选择特定单选按钮时验证文本答案

【问题标题】：jQuery validate text only if a specific radio buttons are selectedjQuery仅在选择特定单选按钮时验证文本
【发布时间】：2018-06-29 03:42:37
【问题描述】：

我需要只有选择某些单选按钮时才需要一个字段文本：在这种情况下，只有选择“inscripto”，选择“IVA EXENTO”或“MONOTRIBUTO”值（其中任何一个）。如果有人选择“Consumidor Final”，则不需要输入文本。

我正在使用此代码，但它不起作用。

我做错了什么？

    <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>

谢谢，弗朗西斯科

【问题讨论】：

你能比“它不起作用”更具体吗？正在发生什么，您希望它做什么？
您不能重复 ID。 stackoverflow.com/questions/9454645/… 修复它并尝试通过类或其名称查找元素。或者使用您为他们提供的每个必需检查的唯一 ID。
嗨！我只是希望如果有人检查“Resp. Inscripto”或“Monotributo”或“IVA Exento”，则需要输入文本“contrato_cuit”。如果有人选中“Consumidor Final”，则不需要输入文本“contrato_cuit”。
Does ID have to be unique in the whole page?的可能重复
您好，感谢您的回复。我已经更改了 ID，因此它们是唯一的，但它不起作用:(

标签： jquery validation radio rules

【解决方案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>

【讨论】：