帶有JQuery的HTML複選框（取消選中其他人和attr）

我在註冊頁面工作，您可以在個人或企業賬戶之間進行選擇。我不知道如何解決這個問題。我已經寫了一些JQuery和一種工作，但它dosnt。屬性更改Works，但只發生一次。我可以選擇「個人」，然後選擇「業務」，之後，單選按鈕不再工作。帶有JQuery的HTML複選框（取消選中其他人和attr）

$(document).ready(function() { 
 
    if ($("#tipoUsuario").on("click", function(){ 
 
     if ($($(".esEmpresa")).is(":checked")){ 
 
      $(".esUsuario").attr("checked", false); 
 
      $("#divUsuario").hide(); 
 
      $("#apellidos").attr("required", false); 
 
      $("#nombres").attr("required", false); 
 
      $("#divEmpresa").show(); 
 
      $("#nombreEmpresa").attr("required", true); 
 
      $("#cuitEmpresa").attr("required", true); 
 
     } else if ($($(".esUsuario")).is(":checked")) { 
 
      $(".esEmpresa").attr("checked", false) 
 
      $(".esUsuario").attr("checked", true); 
 
      $("#divUsuario").show(); 
 
      $("#nombreEmpresa").attr("required", false); 
 
      $("#cuitEmpresa").attr("required", false); 
 
      $("#divEmpresa").hide(); 
 
      $("#apellidos").attr("required", true); 
 
      $("#nombres").attr("required", true); 
 
     }; 
 
    })); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tipoUsuario" class="row"> 
 
    <div class="col-sm-6 m-b-10"> 
 
     <p class="text-muted font-13"> Seleccioná el tipo de cuenta: </p> 
 
     <div class="form-check"> 
 
      <label class="custom-control custom-radio"> 
 
       <input id="esUsuario" name="esUsuario" value=False type="radio" class="esUsuario custom-control-input"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">Personal</span> 
 
      </label> 
 
     </div> 
 
     <div class="form-check"> 
 
      <label class="custom-control custom-radio"> 
 
       <input id="esEmpresa" name="esEmpresa" value=True type="radio" class="esEmpresa custom-control-input"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">Empresa</span> 
 
      </label> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-18 Federico Ribero

通常是排斥對方的單選按鈕sh是相同的名稱..... – Taplar

看看按鈕組http://getbootstrap.com/javascript/#buttons-checkbox-radio，然後將其與此選項卡http://getbootstrap.com/javascript/#標籤 – Cr1xus

只需使用同名字的單選按鈕，他們會根據您的要求行事。無需添加額外的js。

來源

2017-05-18 15:31:31 Sinha

已解決。

更改的名稱爲@Sinha說，並用不同的方法來檢查，如果單選按鈕的if語句

謝謝大家

HTML檢查了：

<div id="tipoUsuario" class="row"> 
    <div class="col-sm-6 m-b-10"> 
     <p class="text-muted font-13"> Seleccioná el tipo de cuenta: </p> 
     <div class="form-check"> 
      <label class="custom-control custom-radio"> 
       <input id="esEmpresa" name="esEmpresa" value="no" type="radio" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
       <span class="custom-control-description">Personal</span> 
      </label> 
     </div> 
     <div class="form-check"> 
      <label class="custom-control custom-radio"> 
       <input id="esEmpresa" name="esEmpresa" value="si" type="radio" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
       <span class="custom-control-description">Empresa</span> 
      </label> 
     </div> 
    </div> 
</div>

腳本：

$("#tipoUsuario").on("change", function(){ 
    if ($('input[name="esEmpresa"]:checked').val() == "si"){ 
     $("#divUsuario").hide(); 
     $("#apellidos").attr("required", false); 
     $("#nombres").attr("required", false); 
     $("#divEmpresa").show(); 
     $("#nombreEmpresa").attr("required", true); 
     $("#cuitEmpresa").attr("required", true); 
    }else{ 
     $("#divUsuario").show(); 
     $("#nombreEmpresa").attr("required", false); 
     $("#cuitEmpresa").attr("required", false); 
     $("#divEmpresa").hide(); 
     $("#apellidos").attr("required", true); 
     $("#nombres").attr("required", true); 
}; 
});

來源

2017-05-18 16:07:34

帶有JQuery的HTML複選框（取消選中其他人和attr）

回答

相關問題