Java Script를 사용하여 값 선택 비활성화 및 활성화

Subashini Raja |

아래 코드를 사용하고 있습니다. 테스트 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);
  } 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);
  }
})

matthias_h

이렇게 할 수 있습니다. 실행 유형 선택 필드에서 값이 선택되지 않았기 때문에 처음에는 필드가 비활성화되지 않았습니다. 데이터 유형을 선택할 때처럼 선택 필드에 "유형 선택"이라는 텍스트가있는 초기 옵션을 추가하여이를 더 명확하게 할 수 있습니다.

$("#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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

JavaScript를 사용하여 콤보 상자 값을 선택하여 활성화 확인란을 비활성화하십시오.

분류에서Dev

.not 선택 Jquery를 사용하여 컨트롤 비활성화

분류에서Dev

활성화 및 비활성화 여러 JSliders - 공유 값

분류에서Dev

변수를 사용하여 버튼 비활성화 및 활성화

분류에서Dev

angularjs 및 ng-repeat를 사용하여 다른 선택 태그에서 옵션을 선택하여 선택 태그를 비활성화했습니다.

분류에서Dev

PHP를 사용하여 선택에 따라 양식 필드를 활성화 / 비활성화하는 방법

분류에서Dev

선택기를 사용하여 jquery로 입력 텍스트 활성화 / 비활성화

분류에서Dev

jquery를 사용하여 라디오 선택시 컨트롤 활성화 / 비활성화

분류에서Dev

beforeShow 및 beforeShowDay를 사용하여 Jquery Calendar 비활성화 날짜

분류에서Dev

확인란을 비활성화하고 jQuery를 사용하여 선택 취소

분류에서Dev

Java 프로그램에서 KEY_WOW64_32KEY를 활성화 및 비활성화하는 방법

분류에서Dev

Java를 사용하여 XML에서 필수 및 선택적 속성 값 추출

분류에서Dev

값 양식 선택에 따라 양식 텍스트 입력을 비활성화 및 활성화합니다 ..?

분류에서Dev

JavaFX tableview 행 선택 활성화 및 비활성화

분류에서Dev

JavaFX tableview 행 선택 활성화 및 비활성화

분류에서Dev

값에 따라 선택 비활성화 / 활성화

분류에서Dev

값에 따라 선택 비활성화 / 활성화

분류에서Dev

jQuery, onclick 및 비활성화 선택

분류에서Dev

JavaScript를 사용하여 CSS 파일을 동적으로 활성화 및 비활성화 하시겠습니까?

분류에서Dev

외래 키 검사를 비활성화 및 활성화하는 트리거

분류에서Dev

부울 플래그 및 ActionListener를 사용하여 commandLink를 활성화 / 비활성화합니다. JSF PrimeFaces

분류에서Dev

Excel VBA를 사용하여 선택 값에 대한 콤보 상자 작업 활성화

분류에서Dev

JavaScript를 사용하여 브라우저 JavaScript 옵션 활성화 및 비활성화

분류에서Dev

JavaScript를 사용하여 브라우저 JavaScript 옵션 활성화 및 비활성화

분류에서Dev

자바 스크립트를 사용하여 입력 필드 활성화 및 비활성화

분류에서Dev

JavaScript를 사용하여 텍스트 상자 및 버튼 활성화 / 비활성화

분류에서Dev

자바 스크립트를 사용하여 확인란 활성화 및 비활성화

분류에서Dev

JQuery를 사용하여 체크 박스 버튼 클릭시 버튼 활성화 및 비활성화 방법

분류에서Dev

codeigniter를 사용하여 비활성화 상태 활성화

Related 관련 기사

  1. 1

    JavaScript를 사용하여 콤보 상자 값을 선택하여 활성화 확인란을 비활성화하십시오.

  2. 2

    .not 선택 Jquery를 사용하여 컨트롤 비활성화

  3. 3

    활성화 및 비활성화 여러 JSliders - 공유 값

  4. 4

    변수를 사용하여 버튼 비활성화 및 활성화

  5. 5

    angularjs 및 ng-repeat를 사용하여 다른 선택 태그에서 옵션을 선택하여 선택 태그를 비활성화했습니다.

  6. 6

    PHP를 사용하여 선택에 따라 양식 필드를 활성화 / 비활성화하는 방법

  7. 7

    선택기를 사용하여 jquery로 입력 텍스트 활성화 / 비활성화

  8. 8

    jquery를 사용하여 라디오 선택시 컨트롤 활성화 / 비활성화

  9. 9

    beforeShow 및 beforeShowDay를 사용하여 Jquery Calendar 비활성화 날짜

  10. 10

    확인란을 비활성화하고 jQuery를 사용하여 선택 취소

  11. 11

    Java 프로그램에서 KEY_WOW64_32KEY를 활성화 및 비활성화하는 방법

  12. 12

    Java를 사용하여 XML에서 필수 및 선택적 속성 값 추출

  13. 13

    값 양식 선택에 따라 양식 텍스트 입력을 비활성화 및 활성화합니다 ..?

  14. 14

    JavaFX tableview 행 선택 활성화 및 비활성화

  15. 15

    JavaFX tableview 행 선택 활성화 및 비활성화

  16. 16

    값에 따라 선택 비활성화 / 활성화

  17. 17

    값에 따라 선택 비활성화 / 활성화

  18. 18

    jQuery, onclick 및 비활성화 선택

  19. 19

    JavaScript를 사용하여 CSS 파일을 동적으로 활성화 및 비활성화 하시겠습니까?

  20. 20

    외래 키 검사를 비활성화 및 활성화하는 트리거

  21. 21

    부울 플래그 및 ActionListener를 사용하여 commandLink를 활성화 / 비활성화합니다. JSF PrimeFaces

  22. 22

    Excel VBA를 사용하여 선택 값에 대한 콤보 상자 작업 활성화

  23. 23

    JavaScript를 사용하여 브라우저 JavaScript 옵션 활성화 및 비활성화

  24. 24

    JavaScript를 사용하여 브라우저 JavaScript 옵션 활성화 및 비활성화

  25. 25

    자바 스크립트를 사용하여 입력 필드 활성화 및 비활성화

  26. 26

    JavaScript를 사용하여 텍스트 상자 및 버튼 활성화 / 비활성화

  27. 27

    자바 스크립트를 사용하여 확인란 활성화 및 비활성화

  28. 28

    JQuery를 사용하여 체크 박스 버튼 클릭시 버튼 활성화 및 비활성화 방법

  29. 29

    codeigniter를 사용하여 비활성화 상태 활성화

뜨겁다태그

보관