Question

我在注册页面工作，您可以选择个人或商业帐户。我不知道如何解决这个问题。我已经写了一些JQuery，并且很有用，但它很有用。属性更改Works，但只发生一次。我可以选择＆＃34;个人＆＃34;然后＆＃34;商业＆＃34;之后，radiobuttons不再工作了。

＆＃13;

 $( 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);
        };
    }));
    
 });

＆＃13;

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

＆＃13;

Answer 1

只为两个单选按钮使用相同的名称，它们将根据您的要求运行。无需添加额外的js。

Answer 2

<强>解决。

将名称更改为@Sinha说，并使用不同的方式检查单词是否已选中单选按钮

谢谢大家

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);
};
});

带有JQuery的HTML Checkbox（取消选中其他人和attr）

2 个答案: