Отключить кнопку в зависимости от опции выбора с помощью jquery?

Question

При выборе опция 1 кнопка должна быть отключена, включите кнопку, когда будут выбраны остальные параметры.

$(document).ready(function(){ 
 
    if($("option[value='1']")){ 
 
    $("button").prop('disabled',true); 
 
    } 
 
    else{ 
 
    $("button").prop('disabled',false); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

Answer 1

В коде $("option[value='1']") будет возвращать объект JQuery, который truthy всегда так, что если оператор не имеет никакого смысла. Хотя ваш код запускается только один раз, когда страница загружается.

Вам необходимо связать обработчик события change, чтобы обновить кнопку на основе текущего значения.

$(document).ready(function() { 
 
    // bind change event handler 
 
    $('#opt').change(function() { 
 
    // update disabled property 
 
    $("button").prop('disabled', this.value == 1); 
 
    // trigger change event to set initial value 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

Answer 2

$(document).ready(function() { 
 
    $('#opt').change(function() { 
 
    $("button").prop('disabled', $(this).val() == 1);//will disable if current value is equals to 1 
 

 
    }).change() 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

На смену регистрации событий значения выберите то в зависимости от значения установить отключение кнопки

Answer 3

Попробуйте это. Удалите атрибут disabled, если вы хотите показать что-то. Прочтите reference и посмотрите следующий пример.

$(document).ready(function(){ 
 
    $("button").prop('disabled',true); 
 
    $('#opt').change(function(){ 
 
    if($(this).val()==1){ 
 
     $("button").attr('disabled','disabled'); 
 
     } 
 
    else{ 
 
     $("button").removeAttr('disabled'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button>button</button>

Answer 4

Вы можете попробовать, как этот

$(document).ready(function() { 
 
     $("#opt").change(function() { 
 
      if ($(this).val() == "1") { 
 
       $("button").prop('disabled', true); 
 
      } 
 
      else { 
 
       $("button").prop('disabled', false); 
 
      } 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="opt"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
</select> 
 
<button disabled >button</button>