why the input box is not disable while checking the check box?

Question

Hi I have the javascript fuction and where i am trying to disable the input box based on check box checked in jquery mobile.But its not working means the value itself it is not taking.Then how to achieve that?

Answer 1

Use prop to disable the checkbox:

$('[name="PD7"]').prop("disabled", false);

css is used to set the style of the matching selector.

Docs: https://api.jquery.com/prop

Set one or more properties for the set of matched elements.

EDIT

Some Optimizations:

$('[name="PD6"]').on('click', function () {
    if ($(this).is(':checked')) {
        $(this).val("Y").prop('disabled', false);
        $('[name="PD7"]').prop("disabled", false);
    } else {
        $(this).val("N");
        $('[name="PD7"]').prop("disabled", true);
    }
});

Answer 2

You can use prop() method to disable the input field, also it's better to use change() event instead of click()

$('[name="PD6"]').change(function() {
  if (this.checked) {
    $(this).val("Y");
    $('[name="PD7"]').prop("disabled", false);
  } else {
    $(this).val("N");
    $('[name="PD7"]').prop("disabled", true);
  }
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content">
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <input name="PD6" id="PD6" type="checkbox" />
      <label for="PD6">Other Disability</label>
    </div>
    <div class="ui-block-b theText">
      <input type="text" name="PD7" value="" />
    </div>
  </div>
</div>

Answer 3

$('[name="PD7"]').css("disabled", "false");

This is not the right way to disable/enable input.

You need to use prop()

$('[name="PD7"]').prop("disabled", false);

Answer 4

1. document.getElementById() wont work on name attribute

2. Use .prop() instead of css() as css() is used for styling.

---

$('[name="PD6"]').click(function () {
    $('[name="PD7"]').prop("disabled", !this.checked);
    this.value = this.checked? "Y": "N";        
});

$('[name="PD6"]').click(function () {
    $('[name="PD7"]').prop("disabled", !this.checked);
    $('[name="PD6"]').val(this.checked? "Y": "N");        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="main" class="ui-content">
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <input name="PD6" id="PD6" type="checkbox" />
            <label for="PD6">Other Disability</label>
        </div>
        <div class="ui-block-b theText">
            <input type="text" name="PD7" value="" />
        </div>
    </div>
</div>

Answer 5

Simple if...else logic in JS

WORKING:DEMO

JS

$("#PD6").click(function () {
    var status = document.getElementById("PD6").checked;
    if (status == true) {
        $("input[type=text]").prop('disabled', true);
    } else {
        $("input[type=text]").prop('disabled', false);
    }
});