Disable textbox if checkbox is not checked

Question

I'm very new to the whole html thing, so I'm trying to figure out how to disable a text box if the checkbox is not checked.I have tried a lot of solutions but nothing so far it's working. Am I using the wrong ids and they don't identify properly? Thanks!

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Horizontal Application Form - Template Monster Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
  <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/switchery.min.css">
  <script type="text/javascript" src="js/switchery.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
  <div id="wrapper">

  <h1>Stellwag - control greseli</h1>

  <form onsubmit="return false" id="form">
  <div class="col-2" style="width:50%">
    <label>
      Data
      <input placeholder="Introduceti data" id="data" name="data" tabindex="1">
    </label>
  </div>
  <div class="col-2" style="width:50%">
    <label>
      Numarul saptamanii
      <input placeholder="Optional - se autogenereaza" id="kw" name="kw" tabindex="2">
    </label>
  </div>
  <div class="col-2" style="width:50%">
    <label>
      Articol
      <input placeholder="Nr articol" id="nr_articol" name="nr_articol" tabindex="3">
    </label>
  </div>
  <div class="col-3" style="width:50%">
    <label>
      Proiect
      <input placeholder="Optional - se autogenereaza" id="proiect" name="proiect" tabindex="3">
    </label>
  </div>
  <div class="col-3" style="width:50%">
    <label>
      Control optic
      <input placeholder="Nr bucati verificate" id="optic" name="optic" tabindex="4">
    </label>
  </div>
  <div class="col-3" style="width:50%">
    <label>
      Control electric
      <input placeholder="Nr bucati veri" id="electric" name="electric" tabindex="4">
    </label>
  </div>
  <div class="col-4">
    <label>Sunt greseli la lipit SMD?</label>
    <center style="position:relative; margin-bottom:6px;"><input type="checkbox"  id="smd" name="smd" class="js-switch"></center>
  </div>
  <div class="col-4">
    <label>
      Scurt
      <input placeholder="Introdu nr lipiturilor scurte" id="scurt_smd" name="scurt_smd" tabindex="6">
    </label>
  </div>
  <div class="col-4">
    <label>
        Incomplete
      <input placeholder="Introdu nr lipiturilor incomplete" id="incomplete_smd" name="incomplete_smd" tabindex="7">
    </label>
  </div>
  <div class="col-4">
    <label>
        Bile de cositor
      <input placeholder="Introdu nr de bile" id="bile" name="bile" tabindex="7">
    </label>
  </div>
  <div class="col-3" style="width=50%">
    <label>Sunt greseli la lipit VAL?</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox"  id="val" name="val" class="js-switch"></center>
  </div>
  <div class="col-3" style="width=50%">
    <label>
        Scurt
      <input placeholder="Introdu nr lipiturilor scurt" id="scurt_val" name="scurt_val" tabindex="7">
    </label>
  </div>
  <div class="col-3" style="width=33,3%">
    <label>
        Incomplete
      <input placeholder="Introdu nr lipiturilor incomplete" id="incomplete_val" name="incomplete_val" tabindex="7">
    </label>
  </div>


  <div class="col-3" >
    <label>Sunt greseli la plantare SMD?</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox" id="greseli_smd" name="greseli_smd" class="js-switch"></center>
  </div>
  <div class="col-3" style="width=33,3%">
    <label>
        Componenta lipsa
      <input placeholder="Introdu nr componentelor lipsa" id="lipsa_smd" name="lipsa_smd" tabindex="7">
    </label>
  </div>
  <div class="col-3" style="width=33,3%">
    <label>
        Componenta inversata
      <input placeholder="Introdu nr componentelor inversate" id="invers_smd" name="invers_smd" tabindex="7">
    </label>
  </div>
  <div class="col-3" >
    <label>Sunt greseli la plantare manuala</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox" id="plantare_manuala" name="plantare_manuala" class="js-switch"></center>
  </div>
  <div class="col-3" style="width=33,3%">
    <label>
        Componenta lipsa
      <input placeholder="Introdu nr componentelor lipsa" id="componente_lipsa" name="componente_lipsa" tabindex="7">
    </label>
  </div>
  <div class="col-3" style="width=33,3%">
    <label>
        Componenta inversata
      <input placeholder="Introdu nr componentelor inversate" id="componente_inversate_1" name="componente_inversate_1" tabindex="7">
    </label>
  </div>

<div class="col-2" >
    <label>Exista greseli la lipire hotbar?</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox" id="greseli_hotbar" name="greseli_hotbar" class="js-switch"></center>
  </div>

  <div class="col-2" style="width:50%">
    <label>
      Lipire hotbar
      <input placeholder="Lipire hotbar" id="lipire_hotbar" name="lipire_hotbar" tabindex="1">
    </label>
  </div>
  <div class="col-2" >
    <label>Sunt greseli de asamblare?</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox"  id="greseli_asamblare" name="greseli_asamblare" class="js-switch"></center>
  </div>
  <div class="col-2" style="width=33,3%">
    <label>
        Asamblare
      <input placeholder="Introdu nr componentelor asamblate gresit" id="componente_inversate_2" name="componente_inversate_2" tabindex="7">
    </label>
  </div>
  <div class="col-2" >
    <label>Sunt greseli de aspect imprimare?</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox" id="greseli_imprimare" name="greseli_imprimare" class="js-switch"></center>
  </div>
  <div class="col-2" style="width=33,3%">
    <label>
        Aspect imprimare
      <input placeholder="Introdu nr componentelor imprimate gresit" id="componente_inversate_3" name="componente_inversate_3" tabindex="7">
    </label>
  </div>
  <div class="col-2" >
    <label>Sunt greseli de aspect material?</label>
    <center style="position:relative; margin-bottom:5px;"><input type="checkbox" id="greseli_aspect" name="greseli_aspect" class="js-switch"></center>
  </div>
  <div class="col-2" style="width=33,3%">
    <label>
        Aspect imprimare
      <input placeholder="Introdu nr componentelor cu aspect material gresit" id="componente_inversate_4" name="componente_inversate_4" tabindex="7">
    </label>
  </div>



  <div class="col-submit">
    <button id="trimite">Salveaza</button>
  </div>

  </form>
  </div>
<script type="text/javascript">
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});
</script>

    <script>
        $(document).ready(function() {
            $('#trimite').click(function() {
                 var frm = $('#form');
                // var data = JSON.stringify(frm.serializeArray());
                 var data = frm.serializeArray();
                 console.log(data);


                $.ajax({
                    type: 'post',
                    url: 'http://localhost:3000/',
                    contentType: 'application/json',
                    crossDomain: true,
                    data: JSON.stringify(data),
                    dataType: 'json',
                    success : function() {
                        alert('sucessfully inserted');
                    },
                    error: function(err) {
                        console.log(err);
                    }

                }); 
            });



        });
        </script>

    **<script>

    function checking(smd) {
    if(smd.checked) {
        document.getElementById('scurt_smd').readOnly = true;
    }
    else {
        document.getElementById('scurt_smd').readOnly = false;
    }
    }
    </script>**

</body>
</html>

DGS · Accepted Answer · 2015-08-13 05:40:55Z

1

$('input:not(:checkbox)').attr('disabled', 'disabled');

$(':checkbox').on('change', function () {
    $(this).closest('div').prevUntil($(':checkbox').closest('div')).find('input').attr('disabled', !$(this).is(':checked'))
});

Will disable all previous inputs based on whether the checkbox is checked

https://jsfiddle.net/xjpnypux/3/

$('input:not(:checkbox)').attr('disabled', 'disabled');

$(':checkbox').on('change', function () {
    $('#a_textbox').attr('disabled', $(this).is(':checked'));
});

To enable a specific textbox when you change any one of the checkboxes

edited Aug 13, 2015 at 5:40

answered Aug 13, 2015 at 5:36

DGS

6,0251 gold badge23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ezekiel Over a year ago

This works.But i don't really want to disable the previous textbox, I want to disable a specific textbox when it is not checked. Thanks

DGS Over a year ago

Well then you can just set $('#' + your_textboxes_id).attr('disabled', true)

Ezekiel Over a year ago

Works like charm. Figured it out. Thanks a lot !

Collectives™ on Stack Overflow

Disable textbox if checkbox is not checked

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related