Отключить кнопку отправки формы html, установить флажок с отметкой галочкой

Я пытаюсь отключить кнопку отправки и активировать ее, когда галочка отмечена галочкой. Простой пример работает на jsfiddleОтключить кнопку отправки формы html, установить флажок с отметкой галочкой

http://jsfiddle.net/8YBu5/522/

Но не при попытке его в моем шаблоне (с начальной загрузкой и т.д.).

Мой шаблон имеет флажок

<input type="checkbox" id="checky"><a href="#">terms and conditions</a>

Затем кнопку

<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>

Тогда JavaScript. Должен ли javascript быть наверху или что-то еще?

<script type="text/javascript"> 
    $('#submit').attr("disabled","disabled"); 

    $('#checky').click(function(){ 

     if($(this).attr('checked') == true){ 
      $('#submit').removeAttr('disabled'); 
     } 
     else { 
      $('#submit').attr("disabled","disabled"); 

     } 
    }); 
    </script>

Кто-нибудь видит, где я иду не так?

Благодаря

UPDATE Спасибо за все предложения, Я теперь попытался добавить $(document).ready(function() { к началу моего сценария и изменил .attr к .prop, до сих пор не работает. Немного больше информации: кнопка не отключена с самого начала, так что, возможно, я не ссылаюсь на кнопку правильно в функции?

UPDATE2 Я пытался добавить предупреждение, чтобы увидеть, если мой браузер запустить, но тревога не показывает, что это могло означать?

<script type="text/javascript"> 
$(document).ready(function() { 
    alert("Welcome"); 
    $('submit').prop("disabled", true); 
    $('checky').click(function(){ 
     if($(this).attr('checked') == true){ 
      $('submit').prop("disabled", false); 
     } 
     else { 
      $('submit').prop("disabled", true); 
     } 
    }); 
});

Update3 Javascript теперь работает, я добавил два предупреждения, чтобы увидеть, что выполнение.

//<![CDATA[ 
$(window).load(function(){ 
$('#postme').attr("disabled","disabled"); 

$('#checky').click(function(){ 

    if($(this).attr('checked') == true){ 
     alert("w"); 
     $('#postme').removeAttr("disabled"); 
    } 
    else { 
     alert("e"); 
     $('#postme').attr("disabled","disabled"); 

    } 
}); 
});//]]>

Когда флажок включен или выключен, я получаю электронное уведомление, говоря мне, если заявление всегда ложно. Любые идеи почему?

UPDATE4 Сниппет работает, просто не в моей странице, тревога 2 всегда выполняется, никогда не бдительный 1 Название

<link href="/static/css/bootstrap.min.css" rel="stylesheet"> 

</head> 

<body> 

    <div class="container"> 


     <div class="row padding"> 
      <div class="col-md-12"> 
       <h1></h1> 
      </div> 
     </div> 

     <div class="row padding"> 

      <form id="new_form" action="/page/" method="POST" > 

       <div class="panel panel-success"> 
       <div class="panel-heading"> 
        <h3 class="panel-title"></h3> 
       </div> 

       <div class="panel-body"> 
        <div class="col-md-12"> 

       </div> 
       </div> 
      </div> 

       <div class="panel panel-info"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Creator submission form</h3> 
       </div> 

       <div class="panel-body"> 
        <div class="col-md-12"> 

        </div> 
       </div> 
       </div> 
      <br> 

       <input type="checkbox" id="checky1"> 
       <input type="submit" id="postme1" value="submit"> 

         </form> 
     </div> 

     <div class="row padding"> 
      <div class="col-md-12"> 

      </div> 
     </div>    
    </div> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$('#postme1').attr("disabled","disabled"); 

$('#checky1').click(function(){ 

    if($(this).attr('checked') == true){ 
     $('#postme1').removeAttr('disabled'); 
    } 
    else { 
     $('#postme1').attr("disabled","disabled"); 
    } 
}); 
});//]]> 

</script> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="/static/js/bootstrap.min.js"></script> 

<div class="container"> 
    <footer> 
    <hr> 

    </footer> 
</div> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$('#postme1').attr("disabled","disabled"); 

$('#checky1').click(function(){ 

    if($(this).attr('checked') == true){ 
     alert("1"); 
     $('#postme1').removeAttr('disabled'); 
    } 
    else { 
     alert("2"); 
     $('#postme1').attr("disabled","disabled"); 

    } 
}); 
});//]]> 

</script> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="/static/js/bootstrap.min.js"></script> 

</body> 
</html>

источник

2014-01-28 holmeswatson

'$ (document) .ready (function() {.... ваш JQuery ...});' - http://learn.jquery.com/about-jquery/how-jquery-works/# ready-code-on-document-ready – gvee

Вы также должны использовать 'prop', а не' attr' - '.prop (" disabled ", true)' – tymeJV

Ваш Javascript код должен быть

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$('#postme').attr("disabled","disabled"); 

$('#checky').click(function(){ 

    if($(this).attr('checked') == true){ 
     $('#postme').removeAttr('disabled'); 
    } 
    else { 
     $('#postme').attr("disabled","disabled"); 

    } 
}); 
});//]]> 

</script> 


</head> 
<body> 
    <input type="checkbox" id="checky"><a href="#">terms and conditions</a> 
<input type="submit" id="postme" value="submit"> 

</body> 


</html>

Этот фрагмент кода работает отлично для меня.

Update

Используйте это как щелчок обработчика события флажка

$('#checky').click(function(){ 

    if($(this).prop('checked')){ 
     $('#postme').removeAttr('disabled'); 
    } 
    else { 
     $('#postme').attr("disabled","disabled"); 

    } 
});

источник

2014-01-28 14:41:12

попробовал это, без изменений – holmeswatson

Поместив , прежде чем мой скрипт выполнил эту работу. Спасибо – holmeswatson

Извините false alarm, кнопка теперь неактивна, но не включена, когда флажок установлен. – holmeswatson

JSFiddle прекрасный ресурс. Одна из прекрасных вещей, которые она делает, - предоставить вам упаковку JQuery!

Have a little read of this:

Запуск кода на Документе Ready

Чтобы убедиться, что их код выполняется после того, как браузер по завершении загрузки документа, многие программисты JavaScript обернуть свой код в функции OnLoad:

window.onload = function() { 
    alert("welcome");  
}

К сожалению, код не запускается до тех пор, пока все изображения не будут завершены, включая баннерную рекламу. Для запуска программы, как только документ будет готов манипулировать, JQuery имеет заявление, известное как готовое событие:

$(document).ready(function() { 
    // Your code here.  
});

источник

2014-01-28 14:40:46 gvee

Убедитесь, что ваш включить ваши <script>после остальной части вашего HTML. Или вы можете обернуть его в:

$(document).ready(function() { 
    // your code here 
});

Также вы должны использовать .change вместо .click, в случае, если пользователь использует клавиатуру, чтобы установить флажок.

источник

2014-01-28 14:42:21 Skwal

Check/Uncheck с помощью клавиатуры также запускает '.click'. –

@krishanu Черт, ты прав :) – Skwal

Отключить кнопку отправки формы html, установить флажок с отметкой галочкой

ответ

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