使用 Java 脚本禁用和启用 Select 值

Question

我在下面使用 code.If 我单击测试 1 或测试 2 或 select全部，新行将是 created.I 如果执行类型需要禁用 DatatType 和预期设置值列是 Get.If I select 从执行类型、数据类型和预期设置值列设置应该是 enabled.How 来实现这个？我在 Html.erb file.How 中使用此代码来创建单独的 js 方法？

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

Answer 1

你可以这样做。请注意，最初这些字段未被禁用，因为在执行类型 select 字段中没有 selected 值。也许您想通过将带有文本 "Select Type" 的初始选项添加到 select 字段来使这一点更清楚，就像您为数据类型 select 设置的一样。

$("#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 脚本禁用和启用 Select 值

Disable and enable Select Value using Java Script

javascript

jquery

ruby-on-rails-3