How to Make Select Option Disable

How do I disable a select option based on another select option?

In your if statement that disables the lower two select elements you just need to change .val().length == 0 to .val and that will disable them when the top two are selected.

var start = 2010;var end = 2030;var options = "";for (var year = start; year <= end; year++) {  options += "<option>" + year + "</option>";}document.getElementById("idTahunBerlaku").insertAdjacentHTML(  "beforeend", options);
var start = 1;var end = 12;var options = "";for (var month = start; month <= end; month++) {  options += "<option>" + month + "</option>";}document.getElementById("idBulanBerlaku").insertAdjacentHTML(  "beforeend", options);
var start = 2010;var end = 2030;var options = "";for (var year = start; year <= end; year++) {  options += "<option>" + year + "</option>";}document.getElementById("idTahunBerlakuS").insertAdjacentHTML(  "beforeend", options);
var start = 1;var end = 12;var options = "";for (var month = start; month <= end; month++) {  options += "<option>" + month + "</option>";}document.getElementById("idBulanBerlakuS").insertAdjacentHTML(  "beforeend", options);
$('#idBtnSimpanSimpan').click(  function() {    if ($('#idPenerbit').val().length == 0 ||      $('#idtrainingName').val().length == 0) {      alert("ISI SEMUA FORM TERLEBIH DAHULU");    } else {      debugger;      var vDatasertifikasi = $('#idFrmAddSertifikasi')        .serialize();      alert(vDatasertifikasi);      debugger;      $.ajax({        url: '/savesertifikasi',        type: 'POST',        data: vDatasertifikasi,        dataType: "json",
        success: function(model) {          debugger;          if (model.status == "berhasil") {            alert("Data berhasil disimpan");            $('#idMdlNewSertifikasi').modal('hide');
            /* redirecting to home of barang */            debugger;
          } else {            alert("Data salah");          }        },        error: function(model) {          debugger;        }      });    }  });
$(".clSelectKiri").change(function() {  if ($('#idTahunBerlaku').val() && $('#idBulanBerlaku').val()) {    $(".clTgglKanan").attr("disabled", false);  } else {    $(".clTgglKanan").attr("disabled", true);  }}).trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form class="form-horizontal" id="idFrmAddSertifikasi" method="post">  <div class="row">    <div class="col-sm-12">      <div class="row">        <!-- LEVEL 1 / KIRI -->        <div class="col-xs-8 col-sm-6">          <div class="col-xs-12">            <label for="SertifikasiName" class="control-label">Nama              Sertifikasi<sup>*</sup>            </label>            <div class="form-group">              <div class="col-sm-12">                <input type="text" class="form-control clborderbiru" maxlength="50" id="idtrainingName" name="certificate_name" placeholder="" title="MAKS. KARAKTER 50">              </div>            </div>          </div>          <div class="col-xs-12 col-sm-12">            <label for="schoolName" class="control-label">Berlaku              Mulai</label>            <div class="row">              <div class="col-xs-8 col-sm-6">                <div class="form-group">                  <div class="col-sm-12">                    <select class="form-control clborderbiru clSelectKiri" id="idBulanBerlaku" name="valid_start_month">                      <option value="" disabled selected hidden>- Pilih                        Bulan -</option>                    </select>                  </div>                </div>              </div>              <div class="col-xs-4 col-sm-6">                <div class="form-group">
                  <div class="col-sm-12">                    <select class="form-control clborderbiru clSelectKiri" id="idTahunBerlaku" name="valid_start_year">                      <option value="" disabled selected hidden>- Pilih                        Tahun -</option>                    </select>                  </div>                </div>              </div>            </div>          </div>
        </div>
        <!-- LEVEL 2 / KANAN -->        <div class="col-xs-4 col-sm-6">
          <div class="col-xs-12">            <label for="organizer" class="control-label">Penerbit<sup>*</sup></label>            <div class="form-group">              <div class="col-sm-12">                <input type="text" class="form-control clborderbiru" id="idPenerbit" name="publisher" placeholder="">              </div>            </div>          </div>
          <div class="col-xs-12 col-sm-12">            <label for="schoolName" class="control-label">Berlaku              Sampai</label>            <div class="row">              <div class="col-xs-8 col-sm-6">                <div class="form-group">                  <div class="col-sm-12">                    <select class="form-control clTgglKanan clborderbiru" id="idBulanBerlakuS" name="until_month">                      <option value="" disabled selected hidden>- Pilih                        Bulan -</option>                    </select>                  </div>                </div>              </div>              <div class="col-xs-4 col-sm-6">                <div class="form-group">
                  <div class="col-sm-12">                    <select class="form-control clTgglKanan clborderbiru" id="idTahunBerlakuS" name="until_year">                      <option value="" disabled selected hidden>- Pilih                        Tahun -</option>                    </select>                  </div>                </div>              </div>            </div>          </div>
        </div>      </div>      <div class="col-xs-12">        <label for="notes" class="control-label">Catatan</label>        <div class="form-group">          <div class="col-sm-12">            <textarea class="form-control clborderbiru" id="idCatatan" rows="6" name="notes"></textarea>          </div>        </div>      </div>      <div class="col-md-offset-10">        <div class="btn-group">          <button type="button" class="btn clBtnMdl">Batal</button>          <button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button>        </div>      </div>    </div>  </div></form>

send html select option disabled attribute with POST and enabled select option attribute with onclick in input form

You can do it like this.

For example

<script>

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = "my-disabled-check-input";
    input.value = document.getElementById('table B').disabled;
    this.appendChild(input);

    this.submit();
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}
</script>

You could also just add another onclick function as well without the same event listener and then submit the form with form.submit();

Then in your PHP file just treat it as a normal POST variable.
You would want to look at $_POST['my-disabled-check-input']; if we are doing it like I setup.

In your form html you can set the POST URL. This URL can be the page that displays the form and also receive the POST variables. If you are unfamiliar with these terms then have a look at https://www.w3schools.com/html/html_forms.asp

But basically you can set an "action" which is just the URL to the php file.

So taken directly from W3schools a form looks like this.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

If wanted to have a PHP file that displayed the form and took $_POST variables we can do something like this.

<?php
if($_POST) {
 echo "Post Variables sent";
 var_dump($_POST);
} else {
 echo "Where I will put my form HTML and JS.";
}
?>

Your PHP can also be used like this to make writing HTML easier.

<?php if($_POST): ?>
    Your name is <?=$_POST['fname']?> <?=$_POST['lname']?>.
<?php else: ?>
    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form>
<?php endif; ?>

This <?=$_POST['fname']?> is equivalent to <?php echo $_POST['fname']; ?> but just a little shorter and I like using it that way in my HTML views.

This script doesn't take into consideration any user input parsing so keep that in mind. You may also want to look into HTML 5 form validation to make sure the input is only information you expect and also PHP filtering of user input.

How to make an if statement to disable select option?

Create and event handler for the Year's change event and disable the season based on what Year's new value is.

https://jsfiddle.net/075fnm4a/

HTML

<select name="Subject">                  
    <option value="Math">Math</option>
    <option value="Physics">Physics</option>
    <option value="Chemistry">Chemistry</option>
    <option value="Biology">Biology</option>
</select>

<select name="Year">                  
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
</select>

<select name="Season">                  
    <option value="Spring">Spring</option>
    <option value="Fall">Fall</option>
</select>

Jquery 

$(document).ready(function(){

  $('select[name="Year"]').on('change',function(){
    var $this = $(this);  
    $('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled 
  });

  $('select[name="Year"]').trigger('change');

});

How to create auto disable select option?

You can use for-loop to make all options disabled from a particular values this value will get passed to a function where we will get the length of options in select-box and then use this under loop to disabled options from select-box .

Demo Code :

function proses_stok() {
  var produk_stock = document.getElementById("produk_size").value;
  document.getElementById("produk_stok").value = produk_stock;
  //if value is small
  if (produk_stock == "stok_s") {
    disable_values(15); //disable from
  } else if (produk_stock == "stok_m") {
    disable_values(20); //disable from

  } else {
    //enable all options
    $("#produk_stok option").prop('disabled', false);
  }

}


function disable_values(start) {
  var s = document.getElementById("produk_stok");
  var end = s.options.length; //getting length of option
  //first enabled all options
  $("#produk_stok option").prop('disabled', false);
  //loop through all options
  for (var i = start; i < end; i++) {
    s.options[i].disabled = true; //disabled 
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name=produk_size id=produk_size class=form-control onchange=proses_stok() style=width:95%>
  <option value=0>Select Size:</option>
  <option value=stok_s>s</option>
  <option value=stok_m>m</option>
  <option value=stok_l>L</option>
</select>
<select name="produk_stok" id="produk_stok" class="form-control" style="width:95%">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
</select>

Disable select options based on another select option after page load

In your other question, where it uses an anonymous function .onchange = function() — you will want to take that and make it a named function so it becomes (for example if you called that function "updateSelect") .onchange = updateSelect

Then you will want to run that function when the page loads, not just onchange, with something like document.addEventListener('DOMContentLoaded', updateSelect);

This assumes that, as you say, when the page reloads after your submit the value of the level select box is preserved and selected.

Adapting Louys Patrice Bessette's answer, I've pulled the function out to the top, set it up to be called when the page (DOM) is ready, and set it to be called onchange of the Level selection.

function updateSelect() {
  const level = levelSelect.value;
  
  // Ensure everything is enabled when no level selected (on first page load)
  if (level === 'Select') {
    gradeSelect.querySelectorAll('option[value]')
               .forEach(o => o.disabled = false);
  }

  gradeSelect.querySelectorAll('option[value]')
             .forEach(function(option) {
    option.disabled = !(level === option.dataset.level)
  });
  // Sets the first one (Choose Grade Level) selected
  gradeSelect.querySelector('option').selected = true;
}

let levelSelect = document.getElementById('level');
let gradeSelect = document.querySelector('.grade_level');

// Update the selection when the page loads, so if 'level' already has
// a value the grade_levels will be enabled/disabled appropriately.
document.addEventListener('DOMContentLoaded', updateSelect);

levelSelect.onchange = updateSelect;
<select name="level" id="level" autofocus>
  <option selected disabled>Choose</option>
  <option value="Junior">Junior</option>
  <option value="Senior">Senior</option>
</select>

<select name="grade_level" class="grade_level">
  <option selected disabled>Choose Grade Level</option>
  <option value="Grade 7" data-level="Junior">Grade 7</option>
  <option value="Grade 8" data-level="Junior">Grade 8</option>
  <option value="Grade 9" data-level="Junior">Grade 9</option>
  <option value="Grade 10" data-level="Junior">Grade 10</option>
  <option value="Grade 11" data-level="Senior">Grade 11</option>
  <option value="Grade 12" data-level="Senior">Grade 12</option>
</select>

Disabled option from select box if already selected

  1. table should be changed to something else, div for example, because table should contain thead, tbody or tr

  2. this line:

    $(this).val($(this).find("option:first").val()).prop('disabled', true);

will disable select, but not option, so try this:

$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);

working example

$('.db-list').on('focus', function () {    var ddl = $(this);    ddl.data('previous', ddl.val());}).on('change', function () {    var ddl = $(this);    var previous = ddl.data('previous');    ddl.data('previous', ddl.val());
    if (previous) {        $('#fields-list').find('select option[value='+previous+']').removeAttr('disabled');    }
    $('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="fields-list" class="table table-hover">   <select class="form-control db-list" >       <option value="">All</option>       <option value="d">1</option>       <option value="t">2</option>       <option value="t">3</option>       <option value="h">4</option>   </select>   <select class="form-control db-list" >       <option value="">All</option>       <option value="d">1</option>       <option value="t">2</option>       <option value="t">3</option>       <option value="h">4</option>   </select></div>

Related Topics

Executing Nodejs Script File in PHP Using Exec()

Detect If String Contains Any Spaces

How to Use Owl Carousel Vertically

Onclick Table Row With Onclick Button and Bootstrap Modal Inside

Generate Child Row Under a Parent Row in HTML Table

Filter Input Text to Enter Only Number and Not Even Decimal

How to Mock the JavaScript Window Object Using Jest

Uploading Multiple Files Using Formdata()

How to Split Date and Time from the Datetime Variable in JavaScript

Angular: How to Get Default @Input Value

Nodejs MySQL Get Correct Timestamp Format

React Enable Button After All Form Fields Are Not Empty

Text Box to Appear When a Radio Button Is Selected

Puppeteer Wait Until Page Is Completely Loaded

How to Redirect to Another Page in Reactjs When a If Condition Is Executed

Css Div Height Not Expanding to Fit Content or Wrapping Content

Get Array of Values from Multiple Inputs Using Jquery

How to Show a Confirmation Dialog Box in Toastr


Leave a reply



Submit