禁用并启用使用 Java 脚本选择值

Question

我使用的是下面的代码。如果我单击“测试 1”或“测试 2”或选择“全部”，将创建新行。如果执行类型为 Get，我需要禁用 DatatType 和预期集值列，如果我从“执行类型”中选择“设置”，则应启用“数据类型”和“预期集值”列。如何实现这一点？我正在Html.erb文件中使用此代码。如何创建单独的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);

  }

})

Answer 1

你可以这样做。请注意，最初不会禁用这些字段，因为在“执行类型选择”字段中未选择任何值。也许您想通过在选择字段中添加带有文本“选择类型”的初始选项来使这一点更加清晰，就像您为数据类型选择一样。$("#all").on("click", function() {&nbsp; if ($(this).is(":checked")) {&nbsp; &nbsp; let boxes = $("#paramTable input[type='checkbox']").not(this).not(":checked");&nbsp; &nbsp; boxes.each(function() {&nbsp; &nbsp; &nbsp; $(this).click();&nbsp; &nbsp; });&nbsp; } else {&nbsp; &nbsp; let boxes = $("#paramTable input[type='checkbox']:checked").not(this);&nbsp; &nbsp; boxes.each(function() {&nbsp; &nbsp; &nbsp; $(this).click();&nbsp; &nbsp; });&nbsp; }});$("#paramTable input[type='checkbox']:not(#all)").on("click", function() {&nbsp; if ($(this).is(":checked")) {&nbsp; &nbsp; let name = $(this).parent("td").next("td").next("td").text().trim();&nbsp; &nbsp; let newname = name.split('.').join('');&nbsp; &nbsp; let newrow = $("<tr>");&nbsp; &nbsp; let newcell = $("<td> ");&nbsp; &nbsp; let newSel = $("<select class='ExeType' name='ExeTypeValue'><option value='getData'>Get</option><option value='SetData'>Set</option></select>")&nbsp; &nbsp; newcell.append(newSel);&nbsp; &nbsp; newrow.append(newSel);&nbsp; &nbsp; let newcell1 = $("<td> ");&nbsp; &nbsp; let newinput = $("<input type='text' class='parameterName' name='" + newname + "' id='" + newname + "' value='" + name + "'/>");&nbsp; &nbsp; newcell1.append(newinput);&nbsp; &nbsp; newrow.append(newcell1);&nbsp; &nbsp; 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>");&nbsp; &nbsp; newrow.append(newcells);&nbsp; &nbsp; $("tbody.parameter_table").append(newrow);&nbsp; } else {&nbsp; &nbsp; let name = $(this).parent("td").next("td").next("td").text();&nbsp; &nbsp; let newname = name.split('.').join('');&nbsp; &nbsp; console.log("newname: " + newname)&nbsp; &nbsp; $("#addParamTable").find("#" + newname).closest("tr").remove();&nbsp; &nbsp; $("#all").prop("checked", false);&nbsp; }})$(document).on("change", ".ExeType", function() {&nbsp; let type = $(this).val();&nbsp; if (type === "getData") {&nbsp; &nbsp; $(this).closest("tr").find(".parameterDscription").attr("disabled", "disabled");&nbsp; &nbsp; $(this).closest("tr").find(".expectedValue").attr("disabled", "disabled");&nbsp; } else {&nbsp; &nbsp; $(this).closest("tr").find(".parameterDscription").removeAttr("disabled");&nbsp; &nbsp; $(this).closest("tr").find(".expectedValue").removeAttr("disabled");&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="paramTable">&nbsp; <tr>&nbsp; &nbsp; <td><input type="checkbox" id="all" /></td>&nbsp; &nbsp; <td>Select all</td>&nbsp; &nbsp; <td></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td><input type="checkbox" /></td>&nbsp; &nbsp; <td>Testing 1</td>&nbsp; &nbsp; <td>1.2.3.4.5</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td><input type="checkbox" /></td>&nbsp; &nbsp; <td>Testing 2</td>&nbsp; &nbsp; <td>.1.3.4.5.8</td>&nbsp; </tr></table><div class="tab-content">&nbsp; <div id="protocol" class="tab-pane fade in active">&nbsp; &nbsp; <div class="span3 border-0" style="overflow: scroll">&nbsp; &nbsp; &nbsp; <table id="addParamTable" class="table table-bordered">&nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Excution Type</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Parameter Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Data Type</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Expected Set Value</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody class="parameter_table">&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div>&nbsp;</div>