Как остановить выполнение js-скрипта?

Question

[Владимир Новицкий]

Нужно, чтобы, если у элемента установлен определенный класс, скрипт не выполнялся, а, если этот класс отсутствует, то выполнялся.
Схематично так:

Если у <button> класс "disabled",
    то скрипт останавливается.
Если у <button> НЕТ класса "disabled",
    то скрипт выполняется.
...
И дальше идет сам скрипт.
...

Вот, как это записать на JS?
Подскажите, пожалуйста.

P. S. Да, совсем забыл. Класс "disabled" подставляется автоматически, совсем другим скриптом.

Answer 1

[Евгений Петров]

Просто проверка

if (проверяем состояние кнопки) {
	// Запускаем что-то
}

Comments

[Владимир Новицкий]

А конкретнее можно? На основе моей схемы.
Я в JS не особо понимаю.

[Евгений Петров]

Так код на jsfiddle.net запостите.

[Владимир Новицкий]

Короче, остановить у меня получилось: jsfiddle.net/qoh0oft5
Теперь надо, как-то запустить.

[Евгений Петров]

Вам следует знать, что форму отправить может не только клик на кнопке. Попытка остановить отправку формы отслеживанием клика — признак новичка.

Самый простой и верный путь — правильно использовать атрибуты элементов форм jsfiddle.net/petroveg/qoh0oft5/5

Но уж если так хочется именно с классами, то jsfiddle.net/petroveg/qoh0oft5/6
Вариант однозначно хуже, ибо вы должны отслеживать кнопку при отправке, тогда как в первом варианте атрибут disabled уже сам по себе предотвращает отправку формы любым пользовательским способом.

Ну и самый отвратный вариант — тип кнопки button. Придётся и отправку, и клик отслеживать jsfiddle.net/petroveg/qoh0oft5/7

Управление состоянием кнопок для первого случая:

function manageButton (status) {
	$(document.forms).filter('[data-container="order"]').find('[data-action="order"]').prop('disabled', status);
}

Для второго: и третьего

function manageButton (status) {
	var $button = $(document.forms).filter('[data-container="order"]').find('[data-action="order"]');

	if (status) {
		$button.addClass('disabled');
	} else {
		$button.removeClass('disabled');
	}
}

[Владимир Новицкий]

@Petroveg: Спасибо большое! Буду разбираться и думать.
Насчет классов. Они нужны только для того, чтобы при нажатии на кнопку, при незаполненных полях, рамка у них становилась красная. Для этого есть скрипт: jsfiddle.net/429rwg1t и в нем используются именно классы. С атрибутом disabled этот трюк не пройдет.

Вот живой пример, с которым я борюсь: novi.co/test/bionica
Там, если наверху нажать на кнопку «Заказать обратный звонок» во всплывающем окне будет форма. В ней, если нажать на button при незаполненных полях, они подкрасятся красным.
А борюсь я с формой которая не в окне, а просто на странице. Там если нажать на кнопку всплывает окошко с сообщением об успешной отправке, даже при незаполненных полях.
Вот я и хочу, чтобы и поля подкрашивались в красный цвет, и сообщение об отправке всплывало, но только при заполненной форме.
Осложняется это тем, что за это отвечают разные скрипты.

[Rad1calDreamer]

@Petroveg: можно наверно чуть сократить с помощью hasClass()

[Евгений Петров]

@Romeo_viruS: вы точно уверены, что вот это:
.is('.test')
длинней, чем
hasClass('test')

Со счётом всё нормально?)

[Rad1calDreamer]

@Petroveg: я не про этот пример

[Евгений Петров]

@Romeo_viruS: строить функционал на классах — дилетантизм. Классы — визуализация.

[Владимир Новицкий]

@Petroveg: А я и не спорю, что в JS я дилетант, если не сказать хуже. Поэтому и взял готовый скрипт. И выяснилось, что он криво работает.

[Rad1calDreamer]

@Petroveg: ну ок. спасибо за поправку

Answer 2

[Александр Бизиков]

то скрипт останавливается.

В таких конструкциях используют return false, для прекращения выполнения функции.
Например, проверка может выглядеть так:

var isBtnDisabled = $('#btn').prop('disabled');
if(isBtnDisabled){
     return false;
}

Comments

[Александр Бизиков]

сорри, не заметил что нужен класс. JS будет выглядеть немного иначе, но суть остается той же - используйте return для прекращения выполнения кода

[Владимир Новицкий]

@bizikov: А для последующего запуска что использовать?
Например, я написал так:

if ( $(".submit").hasClass("disabled") ) {
	return false; // остановил

        // а теперь надо, как то запустить, при условии, что класса "disabled" не обнаружится
}

Далее идет сам скрипт.

[Александр Бизиков]

обычная конструкция if:

if ( $(".submit").hasClass("disabled") ) {
	return false; // остановил
} else {
    // тут выполняется код, если класс disabled не был найден
}

[Владимир Новицкий]

@bizikov: Попробовал. К сожалению, не срабатывает тот скрипт, который после else.

[Александр Бизиков]

@Novitsky: нужно дебажить в консоли, тогда и ясно будет почему не заходит

[Александр Максимов]

Спасибо, топ!

Answer 3

[Сергей]

if ( $('button').hasClass('disabled') ) {
   return false
} else {
    // скрипт
}