$('.form-field.request_custom_fields_xxxxxxxxxxxx').hide();

document.getElementById('.form-field.request_custom_fields_xxxxxxxxxxxx').attr("disabled", "true");
$('.form-field.request_custom_fields_xxxxxxxxxxxx').disabled=true;
$('.form-field.request_custom_fields_xxxxxxxxxxxx').attr("disabled", "true");
$('.form-field.request_custom_fields_xxxxxxxxxxxx').prop('disabled',true);

• Amie Brennan

  • July 06, 2022 04:43

  Hi Jihoon,

  What would be the context around wanting to disable a field based on the value in another field? 

  Is this something which you could use ticket form conditionality at all? I.E if X value is selected, then Z field doesn't show up in conditionality. 

  Best,

  Amie

• jihoon Lee

  • July 06, 2022 04:50

  Hi Amie. I appreciate your comment.

  I am already familiar with the conditional field.

  What I want is not to hide the ticket field so that the customer cannot see it, but "to allow the customer to see the ticket field but not select an option from the drop-down".
  Because I want to let the customer know that when the customer selects field A, the customer has no other choice than the default value in field B.

  Can I get the results I want?

• jihoon Lee

  • July 07, 2022 04:54

  I found the answer to this problem myself.
  I write a method for those who may have the same problem as me.

  (For reference, my code is based on Jquery.)

  [STEP 1 - Element Targeting]
  I figured out that the element I had to target was something else.
  It wasn't "$('.form-field.request_custom_fields_xxxxxxxxx')", it was its children. So the target should be " $('.form-field.request_custom_fields_xxxxxxxxx').children()[2]".

  [STEP 2 - Remove and add attributes of elements]
  The class of this element is "nesty-input". Remove the class of this element with the code below.

  $('.form-field.request_custom_fields_xxxxxxxxxxxx').children()[2].removeAttribute("class");

  Then add a new class with the code below.

  $('.form-field.request_custom_fields_xxxxxxxxx').children()[2].setAttribute("class", "nesty-inputgrey");

  [STEP 3 - Add nesty-input-grey class to style.css]

  Add the following to style.css. Then you will be able to disable some fields if you use the appropriate IF statement.

  I'm not very good with CSS, so my code isn't beautifully simple. Please understand me. =)

  .nesty-input-grey {
    max-width: 100%;
    background-color: #ececec;
    border: 1px solid #ececec;
    box-shadow: none;
    display: inline-block;
    margin: 0;
    min-width: 150px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
      border-radius: 4px;
      padding: 0 15px 0 10px;
    height: 40px;
    line-height: 40px;
    outline: none;
    vertical-align: middle;
    cursor: default !important;
    pointer-events: none;
  }
  
  .nesty-input-grey:hover {
    text-decoration: none;
    pointer-events: none;
    cursor: default !important;
  }
  
  .form-field .nesty-input-grey:focus {
    text-decoration: none !important;
    cursor: default !important;
    pointer-events: none;
  }

• Amie Brennan

  • July 07, 2022 05:37

  Heya,

  This is great! Thanks for sharing the code on how you did it. I've shared this with our in-house developer as well as a nice tip for him. :)

  Best,

  Amie

• jihoon Lee

  • July 07, 2022 05:41

  Thanks Amie.
  If your team makes more beautiful code, please share it here. Obviously it will help others.

  thanks.

Please sign in to leave a comment.