Установить атрибут для чтения только при изменении значения выпадающего списка

Question

У меня есть выпадающее меню, которое имеет 4 варианта.

Что я хочу достичь, так это изменить атрибут входного текста number только на то, когда пользователь выбирает option3 или option4 из раскрывающегося списка.

<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"> 

Это сценарий, который у меня есть сейчас, то, что он делает, просто предупреждает выбранное значение.

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

Любая идея/s действительно были бы оценены!

Answer 1

Вы можете просто проверить ваш .value в вашем change обработчиком и использовать JQuery .prop метод:

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

или использовать массив для создания проще изменить его в будущем:

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

Вот рабочий JSFiddle demo.

Answer 2

Попробуйте следующий код: -

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

Я думаю, что падение вниз всегда только для чтения. что вы можете сделать, это сделать его выключенным

, если вы работаете с формой, инвалиды поле не представляет, поэтому использовать скрытое поле для хранения инвалидов значения выпадающего

Answer 3

Используйте prop() установить только для чтения свойства текста -Box.

1. Создайте массив из всех значений раскрывающегося списка, который при выборе текстового поля с номерами должен быть отключен.
2. Проверьте, если выбранное значение в массиве в обработчике change событий
3. Если выбранное значение параметра присутствует в массиве, отключить номер текстового окно, иначе включить его

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">

Answer 4

Использование prop для ма ке readonly и удалить его обратно

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 
    }); 
}); 

Answer 5

Пожалуйста, используйте это, Вы можете также использовать его динамически

Данный ниже HTML-код

<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"> 

Ниже кода JQuery

$(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); 
      } 
     }  
    }); 
});