0

Want the toggle switch to control the form fields when check, below is the sample code please suggest

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

And below is my jquery handler to make it functional 

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

I was testing to read the attribute data-id for each selected it will make the field disabled / read-only when unchecked by comparing the id with the data-id of respective input.

Mario
  • 4,784
  • 3
  • 34
  • 50
BRAHMA
  • 11
  • 1
  • 6
  • What? I am so confused. – JBis Sep 16 '18 at 03:02
  • Confused with what? – BRAHMA Sep 16 '18 at 03:03
  • What the question? – JBis Sep 16 '18 at 03:03
  • And why do multiple elements have the same id? – JBis Sep 16 '18 at 03:04
  • the toggle field id is same for all 'toggleField' because i am calling it in my jquery where i will read the value when toggled to off (the state will be false) and look the data-id has a value lot-1, when this value is obtained after clicking the switch i will check the input field with the same id and disable it and again when toggled on back to active state and so on for other fields out there. – BRAHMA Sep 16 '18 at 03:10
  • https://stackoverflow.com/a/8498617/7886229 – JBis Sep 16 '18 at 03:12
  • Two elements with the same id is never good or ok practice. Fix that issue and edit your question. – JBis Sep 16 '18 at 03:13

1 Answers1

0

you can use the following code I changed the selector of change event $('#toggleField') to class name $('.mobileToggle') you have to remove Id attributes from checkboxes because it has the same id which is wrong and get checked value dynamically to add and remove readonly attribute according to its value selector for inputs was wrong also $('#lot-'+fieldId) it has to be $('#'+fieldId) finally I fired change event manually to run it on first time page load you can add all this code inside document ready

$('.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();
Ahmed Yousif
  • 2,298
  • 1
  • 11
  • 17