prop('disabled', true) does not work when onchange for other input

Question

I am trying to disable input when a radio button is changed, but it does not change.

The one in the first of the ready function $(".key").prop('disabled', true); works fine.

<div class="card-body">
    @*Title*@
    <div class="form-group">
        <label>Title: </label>
        <div class="row">
            <div class="col-lg-6">
                <label class="option option-plain">
                    <span class="option-control">
                        <span class="radio">
                            <input type="radio" name="title_option" value="0" checked="checked" />
                            <span></span>
                        </span>
                    </span>
                    <span class="option-label">
                        <span class="option-head">
                            <span class="option-title">
                                Key Pair
                            </span>
                        </span>
                        <span class="option-body">
                            Description
                        </span>
                    </span>
                </label>
            </div>
            <div class="col-lg-6">
                <label class="option option option-plain">
                    <span class="option-control">
                        <span class="radio">
                            <input type="radio" name="title_option" value="1" />
                            <span></span>
                        </span>
                    </span>
                    <span class="option-label">
                        <span class="option-head">
                            <span class="option-title">
                                Key Pair
                            </span>
                        </span>
                        <span class="option-body">
                            Description
                        </span>
                    </span>
                </label>
            </div>
        </div>
    </div>
<div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label>Signing Key: </label>
                <select class="selectpicker form-control key" title="key">
                    <option>Key</option>
                </select>
                <span class="description">Description</span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label>Encryption Key: </label>
                <select class="selectpicker form-control key" title="key">
                    <option>Key</option>
                </select>
                <span class="description">Description</span>
            </div>
        </div>
    </div>

<script>
    $(document).ready(function () {
        $(".key").prop('disabled', true);
        $("input[type=radio][name=title_option]").change(function () {
            console.log($(this).val());
            if ($(this).val() == 0) {
                $(".key").prop('disabled', true);
            } else {
                $(".key").prop('disabled', false);
            }

        });
    });
</script>

It's confusing, because your title says that "disabled true" doesn't work - when that does work fine. — freedomn-m, Aug 26 '22 at 07:18
Please include *all* relevant code. See [ask] and [mcve]. Your code works fine *as presented* but does not present all your code, so must be extrapolated. It looks like an issue with the `.val()==0`. Here's your code changed to a simple `input` https://jsfiddle.net/L40tmxhg/ - typing in / clearing the input will enable/disable the drop downs, so that part is **not the problem**. The problem is with the HTML that you've not included. — freedomn-m, Aug 26 '22 at 07:26
@NicolaZreinh which version of jquery are you using. Please see [mcve] - the emphasis is on *complete* (enough code to *demonstrate* the issue, ideally in a snippet) — freedomn-m, Aug 26 '22 at 08:03
I just find the bug, it was a script file that generates other dropdown button — Nicola Zreinh, Aug 26 '22 at 10:36

score 0 · Answer 1 · answered Aug 26 '22 at 09:46

Your code is working fine once I included the jQuery. Please see the result.

<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <body>
      <div class="card-body">
        @*Title*@
        <div class="form-group">
          <label>Title: </label>
          <div class="row">
            <div class="col-lg-6">
              <label class="option option-plain">
                <span class="option-control">
                  <span class="radio">
                    <input
                      type="radio"
                      name="title_option"
                      value="0"
                      checked="checked"
                    />
                    <span></span>
                  </span>
                </span>
                <span class="option-label">
                  <span class="option-head">
                    <span class="option-title"> Key Pair </span>
                  </span>
                  <span class="option-body"> Description </span>
                </span>
              </label>
            </div>
            <div class="col-lg-6">
              <label class="option option option-plain">
                <span class="option-control">
                  <span class="radio">
                    <input type="radio" name="title_option" value="1" />
                    <span></span>
                  </span>
                </span>
                <span class="option-label">
                  <span class="option-head">
                    <span class="option-title"> Key Pair </span>
                  </span>
                  <span class="option-body"> Description </span>
                </span>
              </label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label>Signing Key: </label>
              <select class="selectpicker form-control key" title="key">
                <option>Key</option>
              </select>
              <span class="description">Description</span>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label>Encryption Key: </label>
              <select class="selectpicker form-control key" title="key">
                <option>Key</option>
              </select>
              <span class="description">Description</span>
            </div>
          </div>
        </div>

        <script>
          $(document).ready(function () {
            $(".key").prop("disabled", true);
            $("input[type=radio][name=title_option]").change(function () {
              //console.log($(this).val());
              if ($(this).val() == 0) {
                $(".key").prop("disabled", true);
              } else {
                $(".key").prop("disabled", false);
              }
            });
          });
        </script>
      </div>
    </body>
  </head>
</html>

prop('disabled', true) does not work when onchange for other input

1 Answers1