根据切换开关选择禁用 Bootstrap 中的输入？

Question

阅读文档后，我试图在 Bootstrap 5 中找到一种方法，以在切换开关输入设置为“关闭”时禁用其他输入字段？

父元素是#member_form，开关是'toggleswitch'。

当单击表单中的任何内容时，以下内容将禁用该字段。但我想根据切换开关元素从启用切换到禁用并返回？

    $(document).on('click', '#member_form', function(){
        $("#input_name").attr('disabled','disabled');
    });

有什么建议吗？

Answer 1

在 Bootstrap 5 中，您可以使用 Bootstrap Switch 进行切换，并使用 JavaScript 根据切换状态禁用其他输入字段。

$(document).ready(function(){
    $('#toggle_switch').bootstrapToggle({
        on: 'Enabled',
        off: 'Disabled'
    });

    $('#toggle_switch').change(function(){
        if($(this).prop('checked')){
            $("#input_name").prop('disabled', false);
            // Enable other input fields if needed
        } else {
            $("#input_name").prop('disabled', true);
            // Disable other input fields if needed
        }
    });
});

    <div class="mb-3">
        <label for="toggle_switch" class="form-label">Toggle</label>
        <input type="checkbox" id="toggle_switch" data-toggle="toggle">
    </div>
    <div class="mb-3">
        <label for="input_name" class="form-label">Name</label>
        <input type="text" class="form-control" id="input_name">
    </div>