使用Java脚本禁用和启用选择值 [英] Disable and enable Select Value using Java Script

问题描述

我正在使用下面的代码.如果我单击测试1"或测试2"或selectAll，将创建新行.如果执行类型为Get，则我需要禁用DatatType和Expected set value列.如果我从"Execution Type"中选择"Set"，应该启用DataType和Expected set value列.如何实现?我在Html.erb文件中使用此代码.如何创建单独的js方法?

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

推荐答案

您可以这样做.请注意，最初不会禁用这些字段，因为在执行类型"选择字段中未选择任何值.也许您想通过将带有文本选择类型"的初始选项添加到选择字段来使其更加清晰，就像您可以选择数据类型"一样.

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>

这篇关于使用Java脚本禁用和启用选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！