Disable and enable Select Value using Java Script

问题

I am using below code.If i click Testing 1 or Testing 2 or selectAll,new rows will be created.I need to disable DatatType and Expected set value column if Execution Type is Get.If I select Set from Execution Type, DataType and Expected set value column should be enabled.How to implmente this? I am using this code in Html.erb file.How to create separate js method?

https://jsfiddle.net/bx5fa2vu/

$("#all").on("click", function() {
  if ($(this).is(":checked")) {
    let boxes = $("#paramTable input[type='checkbox']").not(this).not(":checked");
    boxes.each(function() {
      $(this).click();
    });
  } else {
    let boxes = $("#paramTable input[type='checkbox']:checked").not(this);
    boxes.each(function() {
      $(this).click();
    });
  }
});



$("#paramTable input[type='checkbox']:not(#all)").on("click", function() {
  if ($(this).is(":checked")) {
    let name = $(this).parent("td").next("td").next("td").text().trim();
    let newname = name.split('.').join('');
    let newrow = $("<tr>");
    let newcell = $("<td> ");
    let newSel=$("<select class='ExeType' name='ExeTypeValue'><option value='getData'>Get</option><option value='SetData'>Set</option></select>")
    newcell.append(newSel);
        newrow.append(newSel);
    let newcell1 = $("<td> ");

    let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");
    newcell1.append(newinput);

    newrow.append(newcell1);
 let newcells = $("<td><select class='parameterDscription' name='parameter_description'><option value=''>Select Data Type</option><option value='OCTET_STRING'>String</option><option value='INTEGER'>Integer</option><option value='INTEGER32'>Unsigned Integer</option><option value='IPADDRESS'>IP Address</option><option value='x'>Hex String</option></select></td><td><input type='text' class='expectedValue' name='expected_value'></td>");
     newrow.append(newcells);
    $("tbody.parameter_table").append(newrow);
  } else {
    let name = $(this).parent("td").next("td").next("td").text();
    let newname = name.split('.').join('');
    console.log("newname: " + newname)
    $("#addParamTable").find("#" + newname).closest("tr").remove();
    $("#all").prop("checked", false);
  }
})

回答1:

You can do it like this. Note that initially the fields are not disabled because no value is selected at the Execution Type select field. Maybe you want to make this more clear by adding an initial option with the text "Select Type" to the select field like you have it for the select for Data Type.

$("#all").on("click", function() {
  if ($(this).is(":checked")) {
    let boxes = $("#paramTable input[type='checkbox']").not(this).not(":checked");
    boxes.each(function() {
      $(this).click();
    });
  } else {
    let boxes = $("#paramTable input[type='checkbox']:checked").not(this);
    boxes.each(function() {
      $(this).click();
    });
  }
});



$("#paramTable input[type='checkbox']:not(#all)").on("click", function() {
  if ($(this).is(":checked")) {
    let name = $(this).parent("td").next("td").next("td").text().trim();
    let newname = name.split('.').join('');
    let newrow = $("<tr>");
    let newcell = $("<td> ");
    let newSel = $("<select class='ExeType' name='ExeTypeValue'><option value='getData'>Get</option><option value='SetData'>Set</option></select>")
    newcell.append(newSel);
    newrow.append(newSel);
    let newcell1 = $("<td> ");

    let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");
    newcell1.append(newinput);

    newrow.append(newcell1);
    let newcells = $("<td><select class='parameterDscription' name='parameter_description'><option value=''>Select Data Type</option><option value='OCTET_STRING'>String</option><option value='INTEGER'>Integer</option><option value='INTEGER32'>Unsigned Integer</option><option value='IPADDRESS'>IP Address</option><option value='x'>Hex String</option></select></td><td><input type='text' class='expectedValue' name='expected_value'></td>");
    newrow.append(newcells);
    $("tbody.parameter_table").append(newrow);
  } else {
    let name = $(this).parent("td").next("td").next("td").text();
    let newname = name.split('.').join('');
    console.log("newname: " + newname)
    $("#addParamTable").find("#" + newname).closest("tr").remove();
    $("#all").prop("checked", false);
  }
})

$(document).on("change", ".ExeType", function() {
  let type = $(this).val();
  if (type === "getData") {
    $(this).closest("tr").find(".parameterDscription").attr("disabled", "disabled");
    $(this).closest("tr").find(".expectedValue").attr("disabled", "disabled");
  } else {

    $(this).closest("tr").find(".parameterDscription").removeAttr("disabled");
    $(this).closest("tr").find(".expectedValue").removeAttr("disabled");

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="paramTable">
  <tr>
    <td><input type="checkbox" id="all" /></td>
    <td>Select all</td>
    <td></td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Testing 1</td>
    <td>1.2.3.4.5</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Testing 2</td>
    <td>.1.3.4.5.8</td>
  </tr>
</table>
<div class="tab-content">
  <div id="protocol" class="tab-pane fade in active">
    <div class="span3 border-0" style="overflow: scroll">
      <table id="addParamTable" class="table table-bordered">
        <thead>
          <tr class="info">
                      <th>Excution Type</th>

            <th>Parameter Name</th>
            <th>Data Type</th>
            <th>Expected Set Value</th>

          </tr>
        </thead>
        <tbody class="parameter_table">
        </tbody>
      </table>
      </div>
   </div>
 </div>

来源：https://stackoverflow.com/questions/62348620/disable-and-enable-select-value-using-java-script