Хорошо, я пытаюсь показать 2 поля формы на основе выбора флажка. Эти 2 поля формы необходимы. Поэтому в основном, когда установлен флажок, мне нужно показать поля и потребовать их. В противном случае их скрытые и, следовательно, не требуются. У меня работает шоу-шоу. Он не надежно скрывается при отмене выбора (выбор другого флажка в группе). Также, когда они скрыты, они все еще требуются, поэтому я получаю хорошую ошибку...
Я застрял. Любой, у кого есть предложение. Я все еще довольно новый. Заранее спасибо. Вот то, что у меня есть:
<label for="nothing">
Test Method<br/>
<label>
<input type="checkbox" class="testmethod" id="kickback" name="kickback" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['kickback'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
Kickback
</label>
<label>
<input type="checkbox" class="testmethod" id="manual" name="manual" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['manual'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
Manual
</label>
<label>
<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['beastmode'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
Beast Mode
</label>
</label>
<label for="my-text-field" id="mytextfield" style="visibility:hidden">
My Text Field <em> <small>*Required*</small></em>
<input type="text" name="mytextfield" value="<?= $settings['mytextfield'] ?>" tabindex="6" required/>
</label>
<label for="my-number-field" id="mynumberfield" style="visibility:hidden">
Number of Images <em> <small>*Required*</small></em>
<input type="number" name="mynumberfield" value="<?= $settings['mynumberfield'] ?>" tabindex="7" required/>
</label>
И вот мой JS
$("input.testmethod").click(function() {
$('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false);
$(this).prop('checked', true);
});
function yesnoCheck() {
if (document.getElementById('beastmode').checked)
{
document.getElementById('mytextfield').style.visibility = 'visible'
document.getElementById('mynumberfield').style.visibility = 'visible';
}
else
{
document.getElementById('mytextfield').style.visibility = 'hidden';
document.getElementById('mynumberfield').style.visibility = 'hidden';
}
}
Попытайтесь уточнить свой вопрос, я с трудом понимаю, что вы хотите. Значение my-text-field и my-number-field должно основываться на проверенном значении ввода?
Хорошо, это должно сработать.
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#mytextfield').show();
$('#mynumberfield').show();
$('input[name="mytextfield"]').prop('required',true);
$('input[name="mynumberfield"]').prop('required',true);
} else {
$('#mytextfield').hide();
$('#mynumberfield').hide();
$('input[name="mytextfield"]').prop('required',false);
$('input[name="mynumberfield"]').prop('required',false);
}
});
и скрипка http://jsfiddle.net/n67Mf/1/
Я просто закрыл тег и удалил ненужный код.
используйте группу проверки в RequiredFieldValidator и вызовите этот метод при выборе флажка.
используйте этот код
document.getElementById("ID").required = false;
в вашем коде
function yesnoCheck() {
if (document.getElementById('beastmode').checked)
{
document.getElementById('mytextfield').style.visibility = 'visible'
document.getElementById('mynumberfield').style.visibility = 'visible';
document.getElementById("mytextfield").required = true;
document.getElementById("mynumberfield").required = true;
}
else
{
document.getElementById('mytextfield').style.visibility = 'hidden';
document.getElementById('mynumberfield').style.visibility = 'hidden';
document.getElementById("mytextfield").required = false;
document.getElementById("mynumberfield").required = false;
}
}
проверьте http://jsfiddle.net/rvPPg/, чтобы проверить, как это работает