Question

想要在检查时使用拨动开关来控制表单字段，请参考以下示例代码

<div class="form-group row">
    <label for="lot-1" class="col-sm-2 col-form-label">x</label>
    <div class="col-md-4">
        <input type="text" class="form-control numbersOnly" name="lot-1" id="lot-1" placeholder="Result" min="4"
            max="4">
        <div class="toggleWrapper">
            <input type="checkbox" name="toggle1" class="mobileToggle" id="toggleField" checked value="true"
                data-id="lot-1">
            <label for="toggle1"></label>
        </div>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control numbersOnly" name="lot-2" id="lot-2" placeholder="Result" min="4"
            max="4">
        <div class="toggleWrapper">
            <input type="checkbox" name="toggle1" class="mobileToggle" id="toggleField" checked value="true"
                data-id="lot-2">
            <label for="toggle1"></label>
        </div>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control numbersOnly" name="lot-3" id="lot-3" placeholder="Result" min="4"
            max="4">
    </div>
    <div class="toggleWrapper">
        <input type="checkbox" name="toggle1" class="mobileToggle" id="toggleField" checked value="true" data-id="lot-3">
        <label for="toggle1"></label>
    </div>
</div>

下面是我的使其功能正常的jQuery处理程序

var fieldValue = false;

$('#toggleField').on('change', function(e) {
    var fieldId = $("#toggleField").attr('data-id');

    // console.log(fieldValue+fieldId);

    if (fieldValue === true) {
        // $("input[id=name]").attr('readonly',true);
        $('#lot-'+fieldId).attr('readonly',true);
    } else {
        $('#lot-'+fieldId).attr('readonly',false);
    }
});

我正在测试读取每个选定属性的属性data-id，如果将其与相应输入的data-id进行比较，则未选中该字段会使该字段处于禁用状态/只读状态。

Answer 1

您可以使用以下代码将更改事件$('#toggleField')的选择器更改为类名$('.mobileToggle')，您必须从复选框中删除ID属性，因为它具有相同的ID，这是错误的并动态获取检查值以根据其值选择器（用于输入）添加和删除只读属性也是错误的$('#lot-'+fieldId)，它必须为$('#'+fieldId)，最后我手动触发了change事件以在首次加载页面时运行它可以将所有这些代码添加到准备就绪的文件中

$('.mobileToggle').on('change',function(e){

    var fieldId = $(this).attr('data-id');
    var fieldValue = $(this).is(':checked');

    if(fieldValue == true){
        $('#'+fieldId).attr('readonly', 'readonly');
    }else{
        $('#'+fieldId).removeAttr('readonly');
    }

  });
  $('.mobileToggle').change();

使用拨动开关控制表单的输入字段活动状态

1 个答案: