使用切换开关控制表单的输入字段激活状态

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，它将通过比较id和各自输入的data-id，使该字段在未选中时禁用/只读。

Answer 1

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

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