时间戳

首页 > 解决方案 > 如何使用复选框制作表单在选中时禁用其他输入但启用下一个输入de类型文本

javascript - 如何使用复选框制作表单在选中时禁用其他输入但启用下一个输入de类型文本

问题描述

我创建了一个表格，选择一个选项，有时可以完成答案 在此处输入图像描述

当一个复选框被选中时，我设法禁用另一个选项，但我想启用对应于的输入文本

  function enableDisableAll(e) {
                var own = e;
                var form = document.getElementById('myForm');
                var elements = form.elements;

                for (var i = 0 ; i < elements.length ; i++){
                    if(own !== elements[i] ){

                        if(own.checked == true){

                            elements[i].disabled = true;

                        }else{

                            elements[i].disabled = false;
                        }
                    }
                }


            }
.form_control label{

    font-weight: normal;
    font-size: 9px;
    text-align: left;
    color: #2c2c2c;
}

.gestion_compte_consultant{
    display: flex;
    flex-direction: column;
    align-content: center;
}

.title_form{
    padding-bottom: 1.125rem;
    margin-bottom: 1.125rem;
    font-weight: bold;
    font-size: 12px;
    color: #1d5ba6;

    text-align: center;
}

.form_control{
    margin-bottom: 1.5rem;
}

.form_control label{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* .form_control label span{
    text-align: match-parent;
} */

.form_control span{
    text-align: justify;
}

.form_control input[type=text]{

    margin-left: auto;
    width: 98.09px;
    height: 18.5px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #979797;

    font-size: 9px;
    text-align: left;
    color: #2c2c2c;
}

/* .square{
    display: none;
} */

.square + .LabelTransact:before{

    display: inline-block;
    padding-right: 1rem;

    font-family: "FontAwesome";
    font-size: 1rem;
    font-weight: 400;
    content: "\f058";
    color: #C7C7CC;

    clear: both;
}

.square:checked + .LabelTransact:before{
    color: #007AFF;
}

.form-field input[type=submit]{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;

    border: none;
    border-radius: 8px;
    background: #A7B123;
    color: #fff;


}
{!! Form::open(['route' => 'Usertransac', 'method' => 'POST', 'id' => 'myForm'])  !!}
                    <p class="title_form">Option de salaire pour le mois d'août 2019</p>
                    <div class="form_control">
                        {{Form::checkbox('allSalary', true, (bool) 0, ['class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}
                        {{Form::label('allSalary','Recevoir un salaire en utilisant tout mon solde', ['class' => 'LabelTransact'])}}
                    </div>
                    <div class="form_control">
                        {{Form::checkbox('salIfSolde', true, (bool) 0, ['class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}
                        {{Form::label('salIfSolde','Recevoir un salaire uniquement si mon solde atteint', ['class' => 'LabelTransact'])}}
                        {{Form::text('salIfSolde','',['id' => 'montantSaluntil', 'onkeypress' => 'isInputNumber(event)', 'placeholder' => '(Min.420)'])}}
                    </div>
                    <div class="form_control">
                        {{Form::checkbox('minSolde', true, (bool) 0, ['class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}
                        {{Form::label('minSolde','Recevoir un salaire uniquement si je peux conserver sur mon Espace adhérent la somme de', ['class' => 'LabelTransact'])}}
                        {{Form::text('minSolde','',['id' => 'montantSaluntil2', 'onkeypress' => 'isInputNumber(event)', 'placeholder' => '(Min.1)'])}}
                    </div>
                    <div class="form_control">
                        {{Form::checkbox('salIfSolde', true, (bool) 0, ['class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}
                        {{Form::label('salIfSolde','Me verser une paie sans dépasser un salaire net (hors frais et hors PAS) de ', ['class' => 'LabelTransact'])}}
                        {{Form::text('salIfSolde','',['id' => 'montantSaluntil2', 'onkeypress' => 'isInputNumber(event)', 'placeholder' => '(Min.220)'])}}
                    </div>
                    <div class="form_control">
                        {{Form::checkbox('no_Salary',true, (bool) 0, ['class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}
                        {{Form::label('no_Salary','Ne pas recevoir de salaire ni de frais ce mois-ci', ['class' => 'LabelTransact'])}}
                    </div>
                    <div class="form_control">
                        {!! Form::submit('VALIDER') !!}
                    </div>

                {!! Form::close() !!}

我没有找到启用复选框选中的行并检索数据的方法，我想当我汇总所有其他数据时，将考虑在我的数据库中为空

标签： javascriptlaravellaravelcollective

解决方案

代替遍历所有表单元素，将要禁用/启用的表单元素的 id 保留在不同的数组中并单独定位它们。

function enableDisableAll(e) {
    var checkboxes = [
        'allSalary',
        'salIfSolde',
        'minSolde',
        'salIfSolde'
    ];

    for (var i = 0; i < checkboxes.length; i++) {
        var checkbox = = document.getElementById(checkboxes[i]);

        if (e.checked) {
            checkbox.disabled = true;
        } else {
            checkbox.disabled = false;
        }
    }
}

更新：将 id 添加到每个元素，包括那些没有 id 的元素，然后将 id 添加到此函数中的数组中。例如：

{{Form::checkbox('salIfSolde', true, false, ['id' => 'check-salIfSolde', 'class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}

推荐阅读