2016-07-16 6 views
1

Я пытаюсь выяснить, решение этой проблемы:Enable, когда 2 условия выполнены

Я хотел бы иметь функцию, которая проверяет, является ли текстовое поле заполняется текст и флажок. Когда эти условия выполняются, кнопка «Отправить» включена. Если вскоре после нажатия кнопки «Отправить» пользователь очистит текстовое поле или снимет флажок, кнопка «Отправить» снова должна быть отключена.

Мой код:

<%= f.text_field :humanizer_answer ,:class=> "form-control",:required => true, :id=>"answer_humanizer_profile"%> 
    <%= f.check_box :not_a_robot, :id=>"vbbbb",:required => true,:type=> "input" %> 

    <%= button_to t('confirm'), registration_path(@user), data: { confirm: t('confirm_big') }, method: :delete, :class=>"blue-button btn btn-default", :disabled =>:true,:id=>"hid-button" %> 

В этот момент я попытался эту функцию:

$("#vbbbb").change(function() { 
    $value = $("#answer_humanizer_profile").val(); 

    if(this.checked && $value > 0) { 
     $('#hid-button').prop('disabled', false); 
    } else { 
     $('#hid-button').prop('disabled', true); 
    } 
}); 

Эта функция делает немного, что мне нужно, но не 100% от него.

+0

Пожалуйста, пост вывода HTML. Forexample выберете его из источника просмотра из вашего браузера. – Iceman

+0

Попробуйте заменить 'this.checked' на' $ (this) .prop ("checked") ' –

ответ

1

Каждый раз, когда что-то набирается или изменяется в поле ввода или галочка меняется, запускается функция проверки. Здесь оцениваются условия для отключения или включения кнопки отправки. Смотрите также комментировал пример ниже в коде бегуна:

//cache dom elements into variables for performance 
 
var textBox = $("#myTextBox"); 
 
var checkBox = $('#myCheckBox'); 
 
var submitButton = $("#mySubmitButton"); 
 

 
//trigger checking if anything changes in textbox or checkox 
 
textBox.bind("keyup change", checker); 
 
checkBox.change(checker); 
 

 
//checker that evaluates conditions to disable or enable button 
 
function checker() { 
 
    var cond1 = checkBox.is(":checked"); 
 
    var cond2 = (textBox.val().length > 0); 
 
    if (cond1 && cond2) { 
 
    submitButton.prop('disabled', false); 
 
    } else { 
 
    submitButton.prop('disabled', true); 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <input type="text" id="myTextBox"> 
 
    <input type="checkbox" name="vehicle" value="Bike" id="myCheckBox">I have a foobar 
 
    <br> 
 
    <button type="submit" id="mySubmitButton" disabled>SUBMIT</button> 
 
    </form> 
 
</body> 
 

 
</html>

+1

Нет необходимости в функциях оболочки, когда вы вызываете' bind' и 'change'. Pass 'checker' в качестве параметра:' textBox.bind («изменение ключа», checker) 'и' checkBox.change (checker) ' – dugokontov

Смежные вопросы