CODEWITHSUNDEEP
javascriptjqueryhtml
yowza
yowza

Reputation: 260

Set attribute to readonly when dropdown value is changed

I have this dropdown that has 4 options.

What I want to achieve is to change the attribute of input text number to readonly when a user selects option3 or option4 from the dropdown.

<select id="s_id">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

number: <input type="text" name="number">

This is the script that I have for now, what it does is just alert the selected value.

$(document).ready(function () {
    $("#s_id").change(function () {
        var x = $(this).val();
        alert($(this).val());
        if (x == opel) {
            alert("iff");
            $(this).attr("readOnly", "true");
        }
    });
});

JS Fiddle link

Any idea/s would be really appreciated!

Upvotes: 0

Views: 1681

Answers (5)

Mohammed Shaheen MK
Mohammed Shaheen MK

Reputation: 1219

Please use this, You can also use it dynamically

Given below the HTML code

<select id="s_id">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

number: <input type="text" id="number" name="number">

Given below the JQuery code

$(document).ready(function () {
    $("#s_id").change(function () {
        var option_Array = ["option3","option4"]
        var x = $(this).val();
        $("#number").prop('readonly', false);
        for(var i=0; i<option_Array.length; i++){
           if (x == option_Array[i]){             
             $("#number").prop('readonly', true);
             }
        }       
    });
});

Upvotes: 0

Tushar
Tushar

Reputation: 87233

Use prop() to set the readonly property of the text-box.

  1. Create an array of all the values of the drop-down which, when selected, the number text-box should be disabled.
  2. Check if the selected value is in the array in the change event handler
  3. If the selected option value is present in the array, disable the number text-box, else enable it

Demo

$(document).ready(function() {
  // Values when selected, the number box should be disabled
  var values = ['option2', 'option3'];

  // On selection change of the dropdown
  $("#s_id").change(function() {
    // values.indexOf($(this).val()) > -1
    // Checks if the value selected is from the array
    // Comparison returns true when the value is in array, false otherwise
    $('input[name="number"]').prop('readonly', values.indexOf($(this).val()) > -1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="s_id">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

number:
<input type="text" name="number">

Upvotes: 1

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

You can simply check your .value in your change handler and use jQuery .prop method:

$("#s_id").change(function () {
  var isReadonly = (this.value === 'option3' || this.value === 'option4');
  $("input[name='number']").prop('readonly', isReadonly);
});

or using an array for making it easier to modify it in future:

$("#s_id").change(function () {
  var isReadonly = ['option3', 'option4'].indexOf(this.value) > -1;
  $("input[name='number']").prop('readonly', isReadonly);
});

Here is the working JSFiddle demo.

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29693

Use prop to make readonly and remove it back

DEMO

$(document).ready(function () {
    $("#s_id").change(function () {
    if (this.value === 'option3' || this.value === 'option4')
        $("input[name='number']").prop('readonly', true);
    else
        $("input[name='number']").prop('readonly', false);//enable it back again
    });
});

Upvotes: 1

Harsh Sanghani
Harsh Sanghani

Reputation: 1722

Try following code :-

$(this).attr("disabled", true);

I think drop down is always read only . what you can do is make it disabled

if you work with a form , the disabled fields does not submit , so use a hidden field to store disabled dropdown value

Upvotes: 0

Related Questions