.toggle() issue with jquery

Question

У меня есть форма, в которой есть вопрос, где вы можете выбрать несколько ответов, включая «Другие», отметив флажки. Затем вы отмечаете других, это значит, что вы должны показывать текстовое поле, а когда его не разыскивают, он должен снова скрыть текстовое поле.

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

Вот мой JavaScript:

$("input[name = 'production-up']").change(function() { 
    //check if the selected option is others 
    if (this.value === "other") { 
     //toggle textbox visibility 
     $("#productionUpOther").toggle(); 
    } 
}); 

и мой HTML:

<span id='productionUp' class='level'> 
       <p>Production - Reasons why it is up. Click as many as apply.</p> 
       <input type='checkbox' name='production-up' value='Increase in demand' required>Increase in demand <br/> 
       <input type='checkbox' name='production-up' value='Expected increase in demand'>Expected increase in demand <br/> 
       <input type='checkbox' name='production-up' value='Fullfillment of past orders'>Fulfillment of past orders <br/> 
       <input type='checkbox' name='production-up' value='Increased marketing activity'>Increased marketing activity <br/> 
       <input id="other" type="checkbox" name="production-up" value='other' />Other 
       <input id='productionUpOther' name='other-production-up' type='text' required/> 
      </span> 

информируется, что это только часть моего кода. Любые идеи о том, как что-то сделать?

Здесь вы можете что я галочкой other

Но когда я его убрать галочку и нажмите Далее он все еще должно быть подтверждено.

Answer 1

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

$("input[name = 'production-up']").change(function() { 
    //check if the selected option is others 
    if (this.value === "other") { 
     //toggle textbox visibility 
     $("#productionUpOther").toggle(); 
     if (this.checked) { 
      $("#productionUpOther").attr('required','1'); 
     } else { 
      $("#productionUpOther").removeAttr('required'); 
     } 
    } 
}); 

Answer 2

попробовать это

$("#productionUpOther").hide(); 
    $("input[name = 'production-up']").change(function() { 
     //check if the selected option is others 
     if (this.value === "other" && this.checked) { 
      //toggle textbox visibility 
      $("#productionUpOther").show(); 
     } 
     else{ 
      $("#productionUpOther").hide(); 
     } 
    }); 

см DEMO

Answer 3

Вы можете непосредственно использовать ID Selector ("#ID")

$("input#other").change(function() { 
    $("#productionUpOther").toggle(this.checked); 
    $("#productionUpOther").prop('required', this.checked); 
}); 

Answer 4

Что вы хотите сделать, это отключить текстовое поле «другое». Поэтому в этом случае я бы использовал свойство «disabled», а затем спрятал поле с помощью CSS.

Примером может быть:

JS

$("#productionUpOther").prop('disabled', true); 
$("input[name = 'production-up']").change(function() { 
    var hasTheFieldToBeEnabled = this.value === "other" && this.checked; 
    $("#productionUpOther").prop('disabled', !hasTheFieldToBeEnabled); 
}); 

CSS

:disabled 
{ 
    display: none; 
} 

Здесь все отключенные поля скрыты ... Но CSS ваш друг, если это не то, что вы хотите ^^

!

/\ Тщательное: IE < 8 не поддерживает «: отключено», так что если вы хотите поддерживать IE 8, вы должны добавить класс к входу при отключении его